JSFiddle - React, Tailwind, and code Playground

@author Roman Grinyov <[email protected]>

by Raloynner

HTML

<!--Here's our main wrapper.
Since our carousel items get their size from their parent,
we have to specify its height.-->
<div class="carousel-wrapper" style="height: 400px;">
  <!--The carousel uses regular links to cycle through each item.
  The links actually target these display: none; spans so our page doesn't
  jump like it normally would when using jump links.-->
  <span id="target-item-1"></span>
  <span id="target-item-2"></span>
  <span id="target-item-3"></span>
  <!--Here are our carousel items.
  Each has a 'carousel-item' class, which we use for shared styling
  and an item-# class, which we use to control its opacity
  depending on which target-item-# is currently targeted-->
  <div class="carousel-item item-1">
    <!--We can add any content in here, just make sure that
    your .carousel-wrapper is big enough to hold all the content.-->
    <h2>Item 1</h2>
    <p>Content goes here.</p>
    <!--Here are the links that control the carousel! Make sure
    the href of each one is pointing to the right target-item-#
    so that the carousel cycles in sequence.-->
    <a class="arrow arrow-prev" href="#target-item-3"></a>
    <a class="arrow arrow-next" href="#target-item-2"></a>
  </div>
  <!--And here are a couple more carousel items so that
  we have some content to scroll to. Notice the 'light' class?
  Royal blue is a pretty dark background color, so we'll add a CSS
  rule to make the text white if a carousel item has this class-->
  <div class="carousel-item item-2 light" style="background-color: royalblue;">
    <h2>Item 2</h2>
    <p>Content goes here.</p>
    <a class="arrow arrow-prev" href="#target-item-1"></a>
    <a class="arrow arrow-next" href="#target-item-3"></a>
  </div>
  <div class="carousel-item item-3">
    <h2>Item 3</h2>
    <p>Content goes here.</p>
    <a class="arrow arrow-prev" href="#target-item-2"></a>
    <a class="arrow arrow-next" href="#target-item-1"></a>
  </div>
</div>

SCSS

/* Here's where our carousel begins, with the main wrapper being
relatively positioned, so that our absolutely positioned items are
in the right place. */
.carousel-wrapper {
  position: relative;

  /* Our absolutely positioned carousel items span the width and
  height of its parent. We're making them transparent by default so
  that they fade in when we cycle through them using the arrow links. */
  .carousel-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px 50px;
    opacity: 0;
    transition: all 0.5s ease-in-out;

    /* Did you notice the 50px left, right padding up above? It's so
    we can position our arrow links! Each one will be 50px wide. Also,
    I'm using empty links with a background image so that the links
    look like arrows. Make sure you swap out that URL with an actual
    URL so that your arrow links aren't just transparent rectangles. */
    .arrow {
    position: absolute;
    top: 0;
    display: block;
    width: 50px;
    height: 100%;
    background-color: red;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: url("/carousel-arrow-dark.png") 50% 50% / 20px no-repeat;

      /* Let's put our arrow to go back on the left. */
      &.arrow-prev {
        left: 0;
      }

      /* And our arrow to go forward on the right. Since I'm using
      the same arrow image for both my arrows, I'm rotating this one by
      180 degrees so that it points in the right direction */
      &.arrow-next {
        right: 0;
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
      }
    }

    /* I really like how these carousel items look on a dark image
    background, so if a .carousel-item div has the class 'light',
    we'll make its text color white, and use a white arrow instad of
    a dark gray one. Again, make sure this arrow image exists somewhere */
    &.light {
      color: white;

      .arrow {
        background:...