JSFiddle - React, Tailwind, and code Playground

by alemarch

HTML

<div id="metro">
        <div class="metro_half_row">
            <a href="#">
                    <h1>TEXT1</h1>
                    <h2>TEXT</h2>
            </a>
        </div>
        <div class="metro_half_row">
            <a href="#">
                    <h1>TEXT1</h1>
                    <h2>TEXT</h2>
            </a>
        </div>
        <div class="metro_half_row">
            <a href="#">
                    <h1>TEXT1</h1>
                    <h2>TEXT</h2>
            </a>
        </div>
        <div class="metro_half_row">
            <a href="#">
                    <h1>TEXT1</h1>
                    <h2>TEXT</h2>
            </a>
        </div>
    </div>

CSS

#metro {
            width: 100%
            height: auto;
            font-size: 16px;
        }
        #metro .metro_half_row {
            width: 50%;
            float: left;
            height: 150px;
            color: white;
            text-align: center;
            background-color: grey;
            text-align:center;
            display:table;
 
        }
        #metro .metro_half_row a {
            display: table-cell;
            width: inherit;
            vertical-align: middle;
            height: inherit;
            text-align: center;
        
           
        }