JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by ahmadka</title>
  
  <script type='text/javascript' src='/js/lib/dummy.js'></script>
  
  
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
        /******************************************************/
    /*  GENERAL OPTIONS > Home Page
    /******************************************************/
    
    /*  Category Wall  */
    .box-category-home > div.span2, .box-category-home > div.span3 {
      min-height: 200px;
    }
    
    
    
    /******************************************************/
    /*  COLORS AND STYLES > General
    /******************************************************/
    
    /*  Layout  */
    .wrapper {
      width: 980px;
      margin: 20px auto 25px}
    @media (max-width: 767px) {
      .wrapper {
        width: auto;
        margin: 20px 10px 15px}
    }
    @media (min-width: 768px) and (max-width: 979px) {
      .wrapper {
        width: 744px;
        margin: 20px auto 25px}
    }
    
    /*  Body background color and pattern  */
    body {
      background-color: #FFFFFF;
      background-image: url("http://blu-rays.pk/image/data/floral.jpg");
      ?>;
      background-position: top center!important;
      background-repeat: repeat!important;
      background-attachment: fixed!important;
    }
    
    /*  Headings color  */
    h1, h2, h3, h4, h5, h6, .welcome, .box-category-home > div.span2 a, .box-category-home > div.span3 a, .product-info .description span.stock {
      color: #53A3DF;
    }
    
    /*  Body text color  */
    body, label, .dropdown_l li a, .box .box-content .box-content-information a, .box-product .name a, .box-product .l_column .name a, .box-category > ul > li > a, .box-category > ul > li a.active, .box-category > ul > li ul > li > a, .box-category-home > div.span2 > div > ul > li > a, .box-category-home > div.span3...

CSS

/******************************************************/
    /*  GENERAL OPTIONS > Home Page
    /******************************************************/
    
    /*  Category Wall  */
    .box-category-home > div.span2, .box-category-home > div.span3 {
      min-height: 200px;
    }
    
    
    
    /******************************************************/
    /*  COLORS AND STYLES > General
    /******************************************************/
    
    /*  Layout  */
    .wrapper {
      width: 980px;
      margin: 20px auto 25px}
    @media (max-width: 767px) {
      .wrapper {
        width: auto;
        margin: 20px 10px 15px}
    }
    @media (min-width: 768px) and (max-width: 979px) {
      .wrapper {
        width: 744px;
        margin: 20px auto 25px}
    }
    
    /*  Body background color and pattern  */
    body {
      background-color: #FFFFFF;
      background-image: url("http://blu-rays.pk/image/data/floral.jpg");
      ?>;
      background-position: top center!important;
      background-repeat: repeat!important;
      background-attachment: fixed!important;
    }
    
    /*  Headings color  */
    h1, h2, h3, h4, h5, h6, .welcome, .box-category-home > div.span2 a, .box-category-home > div.span3 a, .product-info .description span.stock {
      color: #53A3DF;
    }
    
    /*  Body text color  */
    body, label, .dropdown_l li a, .box .box-content .box-content-information a, .box-product .name a, .box-product .l_column .name a, .box-category > ul > li > a, .box-category > ul > li a.active, .box-category > ul > li ul > li > a, .box-category-home > div.span2 > div > ul > li > a, .box-category-home > div.span3 > div > ul > li > a, .box-manufacturers-home > div.span2 > div > ul > li > a, .box-manufacturers-home > div.span3 > div > ul > li > a, .product-list .name a, .product-grid .name a, .product-grid .description, .product-name h1, .product-info .description a, .product-info .wishlist-compare a, .product-info .review a, .product-info...