JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<div class="group">
    <div class="left">
        <a href="http://raintreeclubvallarta.com/es/menus-de-restaurante-inizio/" target="_self"><div id="col1">
		<span class="tittle-menu">INIZIO RESTAURANT</span>
		</div></a>
    </div>
    <div class="right">
        <a href="http://raintreeclubvallarta.com/en/tenampa-pool-bar-menu/" target="_self"><div id="col2">
			<!-- Column two start -->
		<span class="tittle-menu">TENAMPA POOL BAR</span>
		</div></a>
    </div>
</div>
<div class="group">
    <div class="left">
        <a href="http://raintreeclubvallarta.com/es/menus-de-restaurante-inizio/" target="_self"><div id="col1">
		<span class="tittle-menu">INIZIO RESTAURANT</span>
		</div></a>
    </div>
    <div class="right">
        <a href="http://raintreeclubvallarta.com/en/tenampa-pool-bar-menu/" target="_self"><div id="col2">
			<!-- Column two start -->
		<span class="tittle-menu">TENAMPA POOL BAR</span>
		</div></a>
    </div>
</div>

CSS

.group a{text-decoration:none;}
    .tittle-menu{font-size:18px; font-weight:bold; color:#fff;}
    .left {
        float: left;
        width: 50%;
        height:90px;
    text-align:center;
    line-height: 90px;
    background-color: #fb5b59;
    }
    .right {
        float: right;
        width: 50%;
        height:90px;
    text-align:center;
    line-height: 90px;
    background-color: #36CBB1;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    .group:after {
        content:"";
        display: table;
        clear: both;
    }
    @media screen and (max-width: 480px) {
        .left, .right {
            float: none;
            width: auto;
        }
    }