JSFiddle - React, Tailwind, and code Playground

by reporter

HTML

<div class="css-slider-wrapper">
  <input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
  <input type="radio" name="slider" class="slide-radio2" id="slider_2">
  <input type="radio" name="slider" class="slide-radio3" id="slider_3">
  <input type="radio" name="slider" class="slide-radio4" id="slider_4">

  <!-- Slider Pagination -->
  <div class="slider-pagination">
    <label for="slider_1" class="page1"></label>
    <label for="slider_2" class="page2"></label>
    <label for="slider_3" class="page3"></label>
    <label for="slider_4" class="page4"></label>
  </div>

  <!-- Slider #1 -->
  <div class="slider slide-1">
    <img src="img/model-1.jpg" id="img" alt="">
    <div class="slider-content">
   <h4>Destaques</h4>
   <h2>Veja as nossas últimas novidades!!</h2>
     <button type="button" class="buy-now-btn" name="button" onClick="showModal()"></button>
    </div>
    <div class="number-pagination">
   <span>1</span>
    </div>
  </div>

  <!-- Slider #2 -->
  <div class="slider slide-2">
    <img src="img/model-2.jpg" id="img" alt="">
    <div class="slider-content">
   <h4>Destaques</h4>
   <h2>Esteja a par de todos os Lançamentos!!</h2>
   <button type="button" class="buy-now-btn" name="button"></button>
    </div>
    <div class="number-pagination">
   <span>2</span>
    </div>
  </div>

  <!-- Slider #3 -->
  <div class="slider slide-3">
    <img src="img/model-3.jpg" id="img" alt="">
    <div class="slider-content">
   <h4>Destaques</h4>
   <h2>Visite as nossas Redes Socias para conteúdos exclusivo!!</h2>
   <button type="button" class="buy-now-btn" name="button"></button>
    </div>
    <div class="number-pagination">
   <span>3</span>
    </div>
  </div>

  <!-- Slider #4 -->
  <div class="slider slide-4">
    <img src="img/model-4.jpg" id="img" alt="">
    <div class="slider-content">
   <h4>Destaques</h4>
   <h2>Novidades em Breve</h2>
   <button  type="button" class="buy-now-btn" name="button"></button>
    </div>
    <div...

JavaScript

function showModal()
{
	var modalWin = document.getElementById("portfolioModal1")
  modalWin.style.display="block";
}