<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.first,.second, .third, .Fourth{
width: 100px;
height: 50px;
background-color: blueviolet;
border-radius: 25px;
box-shadow: 5px 5px 7px rgb(70, 70, 70);
text-align: center;
text-transform: capitalize;
color: white;
font-family: cursive;
padding: 10px;
margin: 10px;
}
.flexbox{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
</style>
<title>node mon</title>
</head>
<body>
<div class="flexbox">
<div class="first">first</div>
<div class="second">second</div>
<div class="third">third</div>
<div class="Fourth">Fourth</div>
</div>
</body>
</html>