JSFiddle - React, Tailwind, and code Playground

by bhupendra negi

HTML

<h2> lets play with flex </h2> 
<div class="parent">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

CSS

h2 {
    text-align :center;
    background-color:yellow;
    width:50%;
    margin:0 auto
}
.item {
    /*height: 50px;*/
    margin: 5px;
    background: DeepSkyBlue;
    color: white;
    text-align: center;
    line-height: 50px;
    font-weight: 600;
    width:50px
  
}
.parent {
    border: 5px solid lightcoral;
    margin-top:10px;
    display:flex;
    justify-content:center;
  
    
}