JSFiddle - React, Tailwind, and code Playground

by Sanan Yuzb

HTML

<!DOCTYPE html>

<body>


<div class="main_menu">
    <ul>
        <li>
         
               <p>Lorem ipsum .</p>
       
        </li>

        <li>
   
            <p>Lorem</p>
  
        </li>

        <li>
        <p>Lorem</p>
        </li>

        <li>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium cum ea eius odio accusantium, recusandae earum. Id earum, qui iure eos consectetur, quasi, ipsum unde officiis saepe necessitatibus ad voluptas.</p>
        </li>
    </ul>
</div>

</body>

CSS

body {
    background-color: #9AB87A;
}

.main_logo {
    text-align: center;
    padding: 100px;
   
}

.circle {

   
  
}

.main_menu {
    text-align: center;
    
}

.main_menu > ul {
    list-style-type: none;
     vertical-align:top;
}

.main_menu > ul > li {
        display:flex;
        justify-content:center;
        align-items:center;
        float:left;
        width: 150px;
        height: 150px;
        background: #f8f991;
        border-radius: 75px;
        margin:10px;
   
}



.main_page {
    background: #708B75;
    margin: 90px;
    padding: 40px;
}