JSFiddle - React, Tailwind, and code Playground

by yassinezerguine

HTML

<%-- 
    Document   : home
    Created on : Nov 4, 2016, 3:33:55 PM
    Author     : suhag
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <link rel="apple-touch-icon" sizes="180x180" href="${initParam['link']}/apple-touch-icon.png">
        <link rel="icon" type="image/png" href="${initParam['link']}/favicon-32x32.png" sizes="32x32">
        <link rel="icon" type="image/png" href="${initParam['link']}/favicon-16x16.png" sizes="16x16">
        <link rel="manifest" href="${initParam['link']}/manifest.json">
        <link rel="mask-icon" href="${initParam['link']}/safari-pinned-tab.svg" color="#5bbad5">
        <meta name="theme-color" content="#ffffff">
        <title>Mylo Home</title>
        
        <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/united/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.min.css"/>

        
        <link href="css/style.css" rel="stylesheet">
        <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
        <link href="starter-template.css" rel="stylesheet">
        <script src="js/ie-emulation-modes-warning.js"></script>
<!--        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>

       ...

CSS

body{
	font:14px/22px 'Open Sans', Arial, Helvetica, sans-serif;
}

/* Standard Styles Starts */

a,
a:hover{
	color:#ef4135;
}
a:hover{
}
a:focus{
	outline:none;
}
h1, h2, h3, h4, h5, h6{
	font-family:'Roboto Condensed', Helvetica, Times New Roman, sans-serif;
	color:#252a2f;
}
h1{
	font-size:38px;
}
h2{
	font-size:32px;
}
h3{
	font-size:26px;
}
h4{
	font-size:20px;
}
h5{
	font-size:18px;
}
h6{
	font-size:14px;
}
.main-heading{
	font-size:30px;
}
.main-heading span{
	font-size:18px;
	color:#878a8c;
}
.main-heading2{
	font-size:24px;
}
.main-heading,
.main-heading2,
.sub-heading{
	text-transform:uppercase;
}
.sub-heading{
	font-size:24px;
	padding:10px 0;
}

.header-top li,
.header-top .btn-link,
#main-menu.navbar,
#search .input-group .form-control,
#cart .btn,
.dropdown-menu,
.product-head,
.product-col .caption h4,
.product-col .price,
.product-col .btn-cart,
.breadcrumb,
.side-heading,
.list-group-item,
.product-filter,
.pagination,
.product-info .product-details,
.tabs-panel .nav-tabs{
	font-family: 'Roboto Condensed', sans-serif;
}

hr{
	border-color:#8c8f92;
}

/* Wrapper Styles Starts */

#wrapper {
	margin-top:40px;
	padding:20px;
	background-color:#fff;
}

/* Header Area Styles Starts */

#header-area{
	margin-bottom:20px;
	padding-bottom:5px;
}
	.header-top{
		margin-bottom: 20px;
	}

/* Logo Styles Starts */

#logo{
	margin-top:24px;
}

/* Header Links Styles Starts */

	.header-links ul{
	}
		.header-links li,
		.header-links li a{
			color:#252424;
		}
		.header-links li a{
			font-size: 12px;
			text-transform: uppercase;
		}
		.header-links li a:hover{
			color:#ef4135;
		}

/* Currency & Languages Drop Down Styles Starts */

	#header-area .btn-link{
		padding:0;
		color:#ef4135;
	}
	#header-area .btn-link:hover,
	#header-area .btn-link:focus{
		text-decoration:none;
	}
	#header-area .btn-group + .btn-group{
		margin-left:10px;
	}

/* Search Styles Starts */

	#search{
	}
	#search .input-group{
	}
		#search .input-group...