JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="carousel js-hero-carousel">

  <div class="carousel__item">

    <div data-am-hero="left-center content-left">
      <div class="background-image" style="background-image: url(/assets/toolkit/images/hemsida_banner_host-2018.png);"></div>

      <div class="content-container">
        <div data-am-contentcontainer="middle">
          <div class="content">
            <h2 class="h1">1</h2>
            <p class="intro">
              Nam non risus dignissim, egestas dui ornare, dictum erat. Sed vel felis at dolor ornare posuere.
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>


  <div class="carousel__item">

    <div data-am-hero="left-center content-left">
      <div class="background-image" style="background-image: url(/assets/toolkit/images/hemsida_banner_host-2018.png);"></div>

      <div class="content-container">
        <div data-am-contentcontainer="middle">
          <div class="content">
            <h2 class="h1">2</h2>
            <p class="intro">
              Nam non risus dignissim, egestas dui ornare, dictum erat. Sed vel felis at dolor ornare posuere.
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>


  <div class="carousel__item">

    <div data-am-hero="left-center content-left">
      <div class="background-image" style="background-image: url(/assets/toolkit/images/hemsida_banner_host-2018.png);"></div>

      <div class="content-container">
        <div data-am-contentcontainer="middle">
          <div class="content">
            <h2 class="h1">2</h2>
            <p class="intro">
              Nam non risus dignissim, egestas dui ornare, dictum erat. Sed vel felis at dolor ornare posuere.
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>


  <div class="carousel__item">

    <div data-am-hero="left-center content-left">
      <div class="background-image" style="background-image:...