JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
</head>
    <body>
        <div class="menu">
            <h1>Our Menu</h1>
        </div>
        
        <div class="row">    
            <div class="col-lg-4 col-md-6 col-sm-12"> 
                <div class="sec">
                    <div class="title chicken">Chicken</div>
                     <section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit officia rem ratione pariatur, sunt, possimus amet, delectus doloremque corrupti alias quae! Qui deleniti dicta rerum repudiandae, eligendi incidunt labore natus.
                     Nulla delectus labore architecto suscipit repudiandae deleniti, consectetur debitis quos obcaecati fugiat ipsam at earum dolore provident corrupti, aperiam sequi eos ratione qui perspiciatis modi eligendi nostrum totam alias. Tempore?
                    </section> 
                </div>
            </div>        
       
            <div  class="col-lg-4 col-md-6 col-sm-12">  
                <div class="sec">
                    <div class="title beef">Beef</div>
                     <section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit officia rem ratione pariatur, sunt, possimus amet, delectus doloremque corrupti alias quae! Qui deleniti dicta rerum repudiandae, eligendi incidunt labore natus.
                     Nulla delectus labore architecto suscipit repudiandae deleniti, consectetur debitis quos obcaecati fugiat ipsam at earum dolore provident corrupti, aperiam sequi eos ratione qui perspiciatis modi eligendi nostrum totam alias. Tempore?
                    </section> 
                </div>
            </div>

            <div class="col-lg-4 col-md-12 col-sm-12"> 
                <div class="sec">
                    <div class="title sushi">Sushi</div>
             ...

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.menu {
    position: relative;
    padding: 50px;
   
    height: fit-content;
    }
.menu h1{
     text-align: center;
    }

.sec{
   margin-right: 10px;
    margin-left: 10px;
    margin-top: 20px;
    position: relative;
    float: left;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    background-color: rgba(223, 175, 140, 0.267);
    width: fit-content;
}

.title{
    padding-bottom: 10px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    width: 120px;
    height: 30px;
    text-align: center;
    color: white;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    float: right;
}

.chicken{
background-color: red;
}
.beef{
background-color: pink;
}
.sushi{
 background-color: purple;
}

section{
    padding: 35px 20px 2px 20px;
}

.row{
    width: 100%;

}


    @media (min-width: 768px) and (max-width: 991px) {
    .col-md-6, .col-md-12 {
        float: left;
        width: 100%;
        
    }

    .col-md-6 {
        width: 50%;
        
    }
}

@media (min-width: 992px) {
    .col-lg-4 {
        float: left;
        width: 33.33%;
        
        
    }
}

@media (max-width: 767px) {
    .col-sm-12 {
        float: left;
        width: 100%;
        
    }
}