JSFiddle - React, Tailwind, and code Playground

by Love Trivedi

HTML

<div id="carousel2"> 
                    <div class="span12">
                        <div id="carousel2-bg">

                            <div id="carousel2-left-arrow">
                                <img src="http://placehold.it/100x250" alt="The Naked Radish" title="The Naked Radish" />
                            </div>

                            <div id="carousel2-content-bg">
                                <img src="img/dish1.jpg" alt="The Naked Radish" title="The Naked Radish" class="dish1-img" />
                                <div id="carousel2-content">
                                    <h5>FEATURED RECIPE</h5>
                                </div>
                            </div>

                            <div id="carousel2-right-arrow">
                                <img src="http://placehold.it/100x250" alt="The Naked Radish" title="The Naked Radish" />
                            </div>

                        </div>
                    </div>
                </div>

CSS

#carousel2-left-arrow {
    display: inline-block;
    position: relative;
    left: 0;
    vertical-align:top;
}

#carousel2-content-bg {
    display: inline-block;
    position: relative;
    left: 0;
    background-color: #F7F2EC;
    width: auto;
    height: auto;
    padding: 10px;
    vertical-align:top;
}

#carousel2-right-arrow {
    display: inline-block;
    position: relative;
  
    vertical-align:top;
}

.dish1-img {
    margin-right: 15px;
}

#carousel2-content {
    width: 300px;