JSFiddle - React, Tailwind, and code Playground

by otinanaipali

HTML

<div class="msgBox">

    <div>

        <div>

            <div>

                <div class="boxContent">

                    <h2>
							
																<span class="supTitle">Our</span>
								
								<span class="normTitle">approach</span>
								
							</h2>

                    <p class="boxText">

                        At Shiller Lavy, each project is an opportunity to create a unique real estate experience. This allows us to transform dreams and concepts into tangible success. We know how to make it happen.
                    </p>

                </div>

            </div>




            <div class="boxImg">

                <div class="images-wrapper">

                    <div class="products-slider">

                        <div class="slider-itself">

                            <div class="one-photo-wrapper" rel="0" style="position: relative; visibility: visible; z-index: 1; display: block;">
                                <span style="background-image:url('https://shillerlavy.com/wp-content/uploads/2016/08/iStock_87990675_XLARGE-e1479763766407.jpg')" title=""></span>
                            </div>
                            <div class="one-photo-wrapper" rel="1" style="position: absolute; visibility: hidden; z-index: -1; display: none;">
                                <span style="background-image:url('https://shillerlavy.com/wp-content/uploads/2016/08/iStock_37220854_LARGE-e1476453362278.jpg')" title=""></span>
                            </div>

                        </div>


                        <div class="slider-bullets">
                            <div class="one-gallery productThumb curImg" rel="0"></div>
                            <div class="one-gallery productThumb" rel="1"></div>
                        </div>

                        <div class="sliderLeftArrow"></div>
                        <div class="sliderRightArrow"></div>

                        <div id="timer"><span style="width: 406.762px; overflow:...

CSS

.msgBox > div:first-child {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.msgBox > div:first-child > div {
    display: table-row;
    height: 100%;
}

.msgBox > div:first-child > div > div {
    background: #ffffff none repeat scroll 0 0;
    display: table-cell;
    height: 100%;
    vertical-align: top;
    width: 33%;
}

.msgBox > div:first-child > div > div {
    display: table-cell;
    height: 100%;
    vertical-align: top;
}

.msgBox > div:first-child > div > div.boxImg {
    background-color: #c4d8db;
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: cover;
    line-height: 0;
    width: 67%;
}

.boxImg .images-wrapper,
.boxImg .products-slider,
.boxImg .slider-itself,
.boxImg .one-photo-wrapper,
.boxImg .one-photo-wrapper > a {
    height: 100%;
}

.products-slider {
    position: relative;
}

.boxContent {
    color: #333333;
    padding: 15%;
}

.slider-itself {
    background: #212437 url("../img/gallery-loader.gif") no-repeat scroll center center;
}

.boxImg .one-photo-wrapper {
    min-height: 360px;
}

.one-photo-wrapper {
    box-sizing: border-box;
    padding-bottom: 45.83%;
}

.one-photo-wrapper > span {
    cursor: default;
}

.one-photo-wrapper > a,
.one-photo-wrapper > span {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.boxImg .slider-bullets {
    display: block;
}

.slider-bullets {
    bottom: 15px;
    font-size: 0;
    left: 0;
    line-height: 0;
    position: absolute;
    right: 0;
    text-align: center;
    z-index: 1;
}

.one-gallery.productThumb::after {
    border: 1px solid #ffffff;
    border-radius: 10px;
    bottom: -3px;
    content: "";
    display: block;
    left: -3px;
    opacity: 0;
    position: absolute;
    right: -3px;
    top: -3px;
    transition: all 0.3s linear...