title: Tailwind Carousel
body: <p>I want to make a carousel using Tailwind CSS. But I am not able to convert some pure CSS into tailwind CSS.</p>
  <p>If it is not possible to convert that pure CSS into tailwind CSS then please tell me how to add that CSS in my react project.
  I am using <strong>REACT</strong>.</p>
  <p>Please help me with this issue.</p>
  <p>Pure css:</p>
  <pre><code>.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
  }
  .carousel-item {
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
  }
  #carousel-1:checked ~ .control-1,
  #carousel-2:checked ~ .control-2,
  #carousel-3:checked ~ .control-3 {
    display: block;
  }
  .carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
  }
  #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
  #carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
  #carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet
  { 
    color: #2b6cb0;
  }
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;carousel relative shadow-2xl bg-white&quot;&gt;
      &lt;div class=&quot;carousel-inner relative overflow-hidden w-full&quot;&gt;
        &lt;!--Slide 1--&gt;
          &lt;input class=&quot;carousel-open&quot; type=&quot;radio&quot; id=&quot;carousel-1&quot; name=&quot;carousel&quot; aria-hidden=&quot;true&quot; hidden=&quot;&quot; checked=&quot;checked&quot;&gt;
          &lt;div class=&quot;carousel-item absolute opacity-0&quot; style=&quot;height:50vh;&quot;&gt;
              &lt;div class=&quot;block h-full w-full bg-indigo-500 text-white text-5xl text-center&quot;&gt;Slide 1&lt;/div&gt;
          &lt;/div&gt;
          &lt;label for=&quot;carousel-3&quot; class=&quot;prev control-1 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-blue-700 leading-tight text-center z-10 inset-y-0 left-0 my-auto&quot;&gt;‹&lt;/label&gt;
          &lt;label for=&quot;carousel-2&quot; class=&quot;next control-1 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-blue-700 leading-tight text-center z-10 inset-y-0 right-0 my-auto&quot;&gt;›&lt;/label&gt;
          
          &lt;!--Slide 2--&gt;
          &lt;input class=&quot;carousel-open&quot; type=&quot;radio&quot; id=&quot;carousel-2&quot; name=&quot;carousel&quot; aria-hidden=&quot;true&quot; hidden=&quot;&quot;&gt;
          &lt;div class=&quot;carousel-item absolute opacity-0&quot; style=&quot;height:50vh;&quot;&gt;
              &lt;div class=&quot;block h-full w-full bg-orange-500 text-white text-5xl text-center&quot;&gt;Slide 2&lt;/div&gt;
          &lt;/div&gt;
          &lt;label for=&quot;carousel-1&quot; class=&quot;prev control-2 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-blue-700 leading-tight text-center z-10 inset-y-0 left-0 my-auto&quot;&gt;‹&lt;/label&gt;
          &lt;label for=&quot;carousel-3&quot; class=&quot;next control-2 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-blue-700 leading-tight text-center z-10 inset-y-0 right-0 my-auto&quot;&gt;›&lt;/label&gt; 
          
          &lt;!--Slide 3--&gt;
          &lt;input class=&quot;carousel-open&quot; type=&quot;radio&quot; id=&quot;carousel-3&quot; name=&quot;carousel&quot; aria-hidden=&quot;true&quot; hidden=&quot;&quot;&gt;
          &lt;div class=&quot;carousel-item absolute opacity-0&quot; style=&quot;height:50vh;&quot;&gt;
              &lt;div class=&quot;block h-full w-full bg-green-500 text-white text-5xl text-center&quot;&gt;Slide 3&lt;/div&gt;
          &lt;/div&gt;
          &lt;label for=&quot;carousel-2&quot; class=&quot;prev control-3 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-blue-700 leading-tight text-center z-10 inset-y-0 left-0 my-auto&quot;&gt;‹&lt;/label&gt;
          &lt;label for=&quot;carousel-1&quot; class=&quot;next control-3 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-blue-700 leading-tight text-center z-10 inset-y-0 right-0 my-auto&quot;&gt;›&lt;/label&gt;
  
          &lt;!-- Add additional indicators for each slide--&gt;
          &lt;ol class=&quot;carousel-indicators&quot;&gt;
              &lt;li class=&quot;inline-block mr-3&quot;&gt;
                  &lt;label for=&quot;carousel-1&quot; class=&quot;carousel-bullet cursor-pointer block text-4xl text-white hover:text-blue-700&quot;&gt;•&lt;/label&gt;
              &lt;/li&gt;
              &lt;li class=&quot;inline-block mr-3&quot;&gt;
                  &lt;label for=&quot;carousel-2&quot; class=&quot;carousel-bullet cursor-pointer block text-4xl text-white hover:text-blue-700&quot;&gt;•&lt;/label&gt;
              &lt;/li&gt;
              &lt;li class=&quot;inline-block mr-3&quot;&gt;
                  &lt;label for=&quot;carousel-3&quot; class=&quot;carousel-bullet cursor-pointer block text-4xl text-white hover:text-blue-700&quot;&gt;•&lt;/label&gt;
              &lt;/li&gt;
          &lt;/ol&gt;
          
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>