JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="grid_container_">
  <div class="section_slider grid_container">
    <div class="home_slider">
      <div id="main-slider">
        <div class="body">


          <div class="side">
            <?php $i=0; foreach ($data->slider as $key => $value): ?>
              <div class="main-item <?= $i==0 ? 'animate-in' : '' ?>">
                <a href="<?= $value->link ?>">
                    <div class="back"></div>
                    <div class="image" style="background: url(<?= ROOT_URL.'uploads/slider/'.$value->image ?>);"></div>
                    <div class="text">
                    <h2>
                      <span>
                        <?= $value->title ?>
                      </span>
                    </h2>
                    <?php if ($value->sub_title): ?>
                      <h3>
                        <span>
                          <?= $value->sub_title ?>
                        </span>
                      </h3>
                    <?php endif ?>
                    </div>
                </a>
              </div>
            <?php $i++; endforeach ?>
          </div>


          <div class="side">
            <?php $i=0; foreach ($data->slider as $key => $value): ?>
              <div class="main-itemm <?= $i==0 ? 'animate-inn' : '' ?>">
                <a href="<?= $value->link ?>">
                  <div class="back"></div>
                  <div class="image" style="background: url(<?= ROOT_URL.'uploads/slider/'.$value->image_right ?>);"></div>
                  <div class="text">
                    <div class="inner">
                      <div>
                          <div><?= L('_discover more_') ?></div>
                          <div><?= L('_discover more_') ?></div>
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            <?php endforeach ?>
          </div>
        </div>
      </div>

      <div class="slider_bullets">
        <?php...

CSS

body {
    /* background: black; */
    overflow: hidden;
}

svg {
    width: 100%;
    height: auto;
    position: absolute;
}

.path {
    stroke-dasharray: 5000;
    stroke-dashoffset: 0;
    animation: dash linear 3s both;
}

@keyframes dash {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: 5000;
    }
}