JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<link rel="stylesheet" href="https://skb44.ru/local/templates/skb44/styles_default.min.css?155652384773662">
<!-- jQuery 1.8 or later, 33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Fotorama from CDNJS, 19 KB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>


<div class="fotorama" data-arrows="false" data-click="false" data-swipe="true" data-loop="true" data-transition="crossfade" data-autoplay="5000">

  <div data-img="https://skb44.ru/local/templates/skb44/img/001.jpg">
    <div class="main-banner-wrap">
      <div class="main-banner-footer">
        <div class="main-banner-info">
          <div class="main-banner-title">
            <!-- <span class="m2-title">197 м<sup>2</sup> <small> 4.3 млн рублей</small></span> -->
            <span class="m2-title"><small> Исполняем мечты</small></span>
            <span class="m2-title-didiscription">Дом из клееного бруса 197 м<sup>2</sup></span>
          </div>
          <br class="fotorama-discription"> Последний шанс купить по старой цене:
          <br class="fotorama-discription"> с 15 сентября на 400 000 ₽ дороже!
          <br>
          <div class="qs-bt__bt main-banner-button">
            <a href="#" data-dialog="dlgQuestion" class="bt-gp bt-gp--cw">
              <span class="bt-gp__tt">Бесплатная консультация</span>
              <span class="bt-gp__ic bt-gp__ic--cb bt-gp__ic--iem"></span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div data-img="https://skb44.ru/local/templates/skb44/img/001.jpg">
    <div class="main-banner-wrap">
      <div class="main-banner-footer">
        <div class="main-banner-info">
          <div class="main-banner-title">
            <!-- <span class="m2-title">197 м<sup>2</sup> <small> 4.3 млн рублей</small></span> -->
            <span class="m2-title"><small> Исполняем мечты</small></span>
            <span...

CSS

div.fotorama__nav-wrap {
  position: absolute;
  bottom: 5%;
  top: unset;
  left: 50%;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.fotorama__nav__frame.fotorama__active .fotorama__dot {
  width: 15px;
  height: 15px;
  background: #FFF;
}

.fotorama__dot {
  color: #FFF;
  border: 2px solid #FFF;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}









/*!
 * Fotorama 4.6.4 | http://fotorama.io/license/
 */
.fotorama__arr:focus:after,
.fotorama__fullscreen-icon:focus:after,
.fotorama__html,
.fotorama__img,
.fotorama__nav__frame:focus .fotorama__dot:after,
.fotorama__nav__frame:focus .fotorama__thumb:after,
.fotorama__stage__frame,
.fotorama__stage__shaft,
.fotorama__video iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0
}

.fotorama--fullscreen,
.fotorama__img {
  max-width: 99999px !important;
  max-height: 99999px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important
}

.fotorama__wrap .fotorama__grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab
}

.fotorama__grabbing * {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing
}

.fotorama__spinner {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important
}

.fotorama__wrap--css3 .fotorama__arr,
.fotorama__wrap--css3 .fotorama__fullscreen-icon,
.fotorama__wrap--css3 .fotorama__nav__shaft,
.fotorama__wrap--css3 .fotorama__stage__shaft,
.fotorama__wrap--css3 .fotorama__thumb-border,
.fotorama__wrap--css3 .fotorama__video-close,
.fotorama__wrap--css3 .fotorama__video-play {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0,...