JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<section class="your-section">

    <ul class="call-to-action-list">
        <li class="call-to-action">
            <a href="#">
                <div class="image-w">
                    <img src="http://placehold.it/1600x900" alt="your-image" />
                </div>
                <div class="text-w">
                    <p><strong>Lorem ipsum dolor</strong> sit amet, consectetur adipisicing elit. Repellendus quos molestiae iure odit molestias voluptatum necessit.</p>
                </div>
            </a>
        </li>
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        <li class="call-to-action">
            <a href="#">
                <div class="image-w">
                    <img src="http://placehold.it/1600x900" alt="your-image" />
                </div>
                <div class="text-w">
                    <p><strong>Lorem ipsum dolor</strong> sit amet, consectetur adipisicing elit. Repellendus quos molestiae iure odit molestias voluptatum necessit.</p>
                </div>
            </a>
        </li>
        
        <li class="call-to-action">
            <a href="#">
                <div class="image-w">
                    <img src="http://placehold.it/1600x900" alt="your-image" />
                </div>
                <div class="text-w">
                    <p><strong>Lorem ipsum dolor</strong> sit amet, consectetur adipisicing elit. Repellendus quos molestiae iure odit molestias voluptatum necessit.</p>
                </div>
            </a>
        </li>
        
    </ul>
    
</section> <!-- .your-section -->

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

.your-section {
    width: 100%;
    float: left;
}

.call-to-action-list {
    width: 100%;
    float: left;
    list-style: none;
    margin: 0; padding: 0;
}

.call-to-action {
    width: 33.3333%;
    float: left;
    padding: .5rem;
    
    border: 1px solid red;
}

.call-to-action a {
    display: block;
}

.image-w {
    width: 100%;
    float: left;
}

.image-w img {
    display: block;
    width: 100%;
    height: auto;
}

.text-w {
    width: 100%;
    float: left;
}