JSFiddle - React, Tailwind, and code Playground

by viphalongpro

HTML

<link rel="stylesheet" href="http://oneillwebs.com/www/css/reset.css">
<!-- Flex Box -->
<section>
    
    <!-- Flex Items -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    
</section>

CSS

/* Flex Box */
section { padding: 1em; background: black; display: flex; flex-flow: column; height: 100%; justify-content: space-around; }

/* Flex Items */
div { border-top: 1px solid #ccc; background: #f2f2f2; height: 25%; }
div:first-child { border-top: 1px solid transparent; }
div:hover { background: white; }
div:before {
    content:'';
    height:100%;
    display:inline-block;
    vertical-align:middle;
}