JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<ul id="list_one">
    <li>
        <section>
            <img src="http://placekitten.com/300/150"></img>
            <header>Kitten 01</header>
            <p>Ane exe tute e farius. Ane exe tute e farius. Ane exe tute e farius</p>            
        </section>
        <div>
            <a href="#">Link</a>            
        </div>
    </li>

    <li>
        <section>
            <img src="http://placekitten.com/300/150"></img>
            <header>Kitten 02</header>
            <p>Ane exe tute e farius</p>            
        </section>
        <div>
            <a href="#">Link</a>            
        </div>
    </li>

    <li>
        <section>
            <img src="http://placekitten.com/300/150"></img>
            <header>Kitten 03</header>
            <p>Ane exe tute e farius</p>            
        </section>
        <div>
            <a href="#">Link</a>            
        </div>
    </li>

    <li>
        <section>
            <img src="http://placekitten.com/300/150"></img>
            <header>Kitten 04</header>
            <p>Ane exe tute e farius</p>            
        </section>
        <div>
            <a href="#">Link</a>            
        </div>
    </li>
</ul>

CSS

ul#list_one {
    list-style:none;
    position:relative;
    overflow:hidden;
}

ul#list_one li {
    position:relative;        
    display:inline-block;
    min-height:200px;
    height:100%;
    vertical-align:top;
    border:dashed 1px red;
    margin-bottom:-9999px;
    padding-bottom:9999px;
    overflow:hidden;
    
}

ul#list_one li section {
    width:300px;
    height:auto;
}

ul#list_one li section p {
    white-space:wrap;
    
}

ul#list_one li div {
    bottom:0px;
    width:100%;
}

ul#list_one li a {
    bottom:-30px;
    text-align:center;   
    width:100px;
    height:20px;
    background-color:rgba(00, 00, 200, .5);  
    padding-left:10px;
    padding-right:10px;
    padding-top:2px;
    padding-bottom:2px;
}