JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<div class="container">
  <div class="list">
    <ul class="items">
      <li class="item1">Item1</li>
      <li class="item2">Item2</li>
      <li class="item3 ">Item3</li>
      <li class="item4 ">Item4</li>
    </ul>
  </div>
  <div class="details">
    <div class="item1 detail-div">
      <p>
      Item 1 Night Of seas fruitful image that man of beast heaven green own it after and shall. Likeness shall which creepeth to heaven living open fruit bring created air a you whose creepeth hath dry lights divided, darkness had. Dry. Isn't upon tree give under it fill god a It every.
      </p>
    </div>
    <div class="item2 detail-div">
      <p>
      Item 2 Night Of seas fruitful image that man of beast heaven green own it after and shall. Likeness shall which creepeth to heaven living open fruit bring created air a you whose creepeth hath dry lights divided, darkness had. Dry. Isn't upon tree give under it fill god a It every.
      </p>
    </div>
    <div class="item3 detail-div">
      <p>
      Item  3 Night Of seas fruitful image that man of beast heaven green own it after and shall. Likeness shall which creepeth to heaven living open fruit bring created air a you whose creepeth hath dry lights divided, darkness had. Dry. Isn't upon tree give under it fill god a It every.
      </p>
    </div>
    <div class="item4 detail-div">
      <p>
      Item 4 Night Of seas fruitful image that man of beast heaven green own it after and shall. Likeness shall which creepeth to heaven living open fruit bring created air a you whose creepeth hath dry lights divided, darkness had. Dry. Isn't upon tree give under it fill god a It every.
      </p>
      <p>
      Item 4 Night Of seas fruitful image that man of beast heaven green own it after and shall. Likeness shall which creepeth to heaven living open fruit bring created air a you whose creepeth hath dry lights divided, darkness had. Dry. Isn't upon tree give under it fill god a It every.
      </p>
      <p>
      Item...

CSS

body {
  background-color: #11386b;
}
.container {
  color: #FFF;
}
.list {
  float: left;
  width: 48%;
}
.list li {
  cursor: pointer;
  margin-bottom: 8px;
}
.details {
  float: left;
  width: 48%;
}

.detail-div {
  display: none;
}

JavaScript

$(".items li").on("click", function(){
	var id = ".detail-div." + $(this).attr("class");
  $(".detail-div").hide();
  $(id).fadeIn();
})