JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<center><h2 id="contact">INIZIO CANCUN</h2></center>
<div id="wrapper">
    <div class="about"><h6>INIZIO CANCUN</h6><br><br><H7>ADDRESS:</H7><br>CLUB REGINA CANCUN<br>Blvd. Kukulcan Km. 20.5<br>Cancun, Quintana Roo<br><br><H7>EMAIL:</H7><br>[email protected]<br><br><H7>HOURS:</H7><br>Breakfast:7:00 am - 12:00 pm<br>Dinner: 6:30 pm - 10:30 pm</div>
    <div class="about"><h6>INIZIO LOS CABOS</h6><br><br><H7>ADDRESS:</H7><br>CLUB REGINA LOS CABOS<br>Carretera Transpeninsular Kilometro 22.5<br> Los Cabos, Baja California Sur<br><br><H7>EMAIL:</H7><br>[email protected]<br><br><H7>HOURS:</H7><br>Breakfast: 7:00 am - 11:30 am<br>Dinner: 6:00 pm - 10:30 pm</div>
</div>
&nbsp;&nbsp;

CSS

#wrapper {
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    text-align: center;
}


.about {
    display: inline-table;
    width: 300px;
    height: 300px;
    margin: 20px 20px 20px 20px;
    background-color: #F15755;
    border-width: 2px;
    border-color: #333;
    border-style: solid;
    border-radius: 4px;
}

@media only screen and (max-width: 1033px) {
    
    .about:last-child {
    width: 645px;
    }
}

@media only screen and (max-width: 704px) {
    
    .about, .about:last-child {
    box-sizing: border-box;
    width: 90%;
    min-width: 200px;
    margin: 20px 5% 20px 5%;
    }
}