JSFiddle - React, Tailwind, and code Playground

by Zoxon

HTML

<div class="b-slider">
    <div class="b-slider__wrapper">
        <ul>
            <li class="b-slider__item"><a href="#"><img src="http://lorempixel.com/500/250" alt="Slide title" /></a></li>
            <li class="b-slider__item"><a href="#"><img src="http://lorempixel.com/500/250" alt="Slide title 2" /></a></li>
            <li class="b-slider__item"><a href="#"><img src="http://lorempixel.com/500/250" alt="Slide title 3" /></a></li>
        </ul>
        <div class="clear"></div>
    </div>
    <div class="b-slider__controls">
        <div class="b-slider__arrows">
            <ul>
                <li class="b-arrow b-arrow_larr"><a href="#">&larr; Prev</a></li>
                <li class="b-arrow b-arrow_rarr"><a href="#">&rarr; Next</a></li>
            </ul>
        </div>
        <div class="b-slider__pagination">
            <div class="b-dot-pagination">
                <ul>
                    <li class="b-dot-pagination__item b-dot-pagination__item_active"><a href="#">1</a></li>
                    <li class="b-dot-pagination__item"><a href="#">2</a></li>
                    <li class="b-dot-pagination__item"><a href="#">3</a></li>
                </ul>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</div>

CSS

* {
    padding: 0;
    margin: 0;
}

.clear {
    clear: both;
}

.b-slider {
    
}

.b-slider__wrapper {
    width: 500px;
    height: 250px;
    overflow: hidden;
}

.b-slider__wrapper  ul{
    width: 1500px; /* Считается скриптом */
}

.b-slider__item {
    width: 500px;
    height: 250px;
    float: left;
    list-style: none;
}
.b-dot-pagination__item {
    float: left;
    padding: 5px;
    list-style: none;
}