JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="//angularlight.org/bin/alight_0.12.last.min.js"></script>
<div al-app al-init="active=1">
  <div id="slider">
   <div class="item" al-class="active: active==1">
    <h1>First</h1>
    <img src="http://lorempixel.com/400/200/cats/1">   
   </div>

   <div class="item" al-class="active: active==2">
    <h1>Second</h1>
    <img src="http://lorempixel.com/400/200/cats/2">
   </div>

   <div class="item" al-class="active: active==3">
    <h1>Third</h1>
    <img src="http://lorempixel.com/400/200/cats/3">
   </div>

   <div class="item" al-class="active: active==4">
    <h1>Fourth</h1>
    <img src="http://lorempixel.com/400/200/cats/4">
   </div>

  </div>

  ***между ними html код***
  {{active}}

  <div id="menu">
    <ul>
      <li @mouseover="active=1"><a>Первый</a></li>
      <li @mouseover="active=2"><a>222</a></li>
      <li @mouseover="active=3"><a>333</a></li>
      <li @mouseover="active=4"><a>444</a></li>
    </ul>
  </div>
</div>

CSS

#menu li {
  border: 1px solid blue;
}

#slider {
  height: 300px;
}

.item {
  position: absolute;  
  opacity: 0;
  transition: opacity 1s;
}

.active {
  opacity: 1 !important;
}