JSFiddle - React, Tailwind, and code Playground

by Baliga

HTML

<!DOCTYPE HTML>  
    <html><head>
    <meta charset="utf-8">
    <title>
        template
    </title>
    <link rel="stylesheet" href="./test.css" type="text/css">
    <link rel="shortcut icon" href="IMG_20180522_235723.jpg" type="image/x-icon">
    </head>
    <body>
    <div id="main">
    <div class="wrapper row1">
        <header id="header" class="clear">
            <hgroup>
                <h1><a href="#">7learn.com</a></h1>
                <h2>online web design and programing courses</h2>
            </hgroup>
            <nav>
                <ul>
                    <li><a href="#" class="current">خانه</a></li>
                    <li><a href="#"></span>خدمات </a></li>
                    <li><a href="#">درباره ی ما</a></li>
                    <li><a href="#">تماس با ما</a></li>
                    <li><a href="#">دسته بندی</a></li>
                </ul>
            </nav>
        </header>
    </div>
    <!--content-->
    <div class="clear"></div>
    <div class="wrapper row2">
        <div class="clear" id="container">
            <!--slider-->
            <section id="slider">
                <a href="#"><img src="like.jpg" alt="image"></a>
            </section>
            <!--sidebar-->
            <aside id="left-column">
                <h2 class="title">categories</h2>
                <nav>
                    <ul>
                        <li><a href="http://www.7learn.com">web design classes</a></li>
                        <li><a href="http://www.7learn.com">html & css</a></li>
                        <li><a href="https://www.w3schools.com">Visit W3Schools.com!</a></li>
                        <li><a href="https://www.7learn.com">secure link one</a></li>
                        <li><a href="https://www.7learn.com">secure link two</a></li>
                        <li><a href="http://www.7learn.com">php course</a></li>
                    </ul>
                </nav>
                <h2 class="title">categories</h2>
                <h2...

CSS

/* fonts */
    @font-face {
        font-family: BYekan;
        src: url("fonts/BYekan.eot") format('eot'),
        url("fonts/BYekan.woff") format('woff'),
        url("fonts/BYekan.ttf") format('truetype');
    
    }
    
    /* general styles */
    body {
        background: #f2f2f2 url("bg1.png") fixed;
        font-family: sans-serif;
    }
    
    a {
        text-decoration: none;
        color: #008cc6;
    }
    
    a:hover {
        color: #aaaaaa;
    }
    
    h1, h2, h3, h4, h5 {
        font-family: Georgia, serif;
    }
    
    img {
        border: 0;
        max-width: 100%;
    }
    
    .clear {
        clear: both;
    }
    
    /* main container */
    #main {
        width: 960px;
        margin: 0 auto 0 auto;
        background-color: #fff;
        border: 1px solid #dddddd;
        border-radius: 3px;
        padding: 10px;
        box-shadow: -2px -2px 3px #ddd;
    }
    
    /* header */
    #header {
        position: relative;
    }
    
    #header hgroup {
        top: 0;
        left: 0;
        position: absolute;
    }
    
    #header hgroup h1, #header hgroup h2 {
        background-color: #ffffff;
        margin: 0;
    }
    
    #header hgroup h1 {
        font-size: 28px;
    }
    
    #header hgroup h1 a {
        color: #0099ff;
    }
    
    #header hgroup h2 {
        font-size: 14px;
        color: #00ccff;
    }
    
    #header nav {
        float: right;
        direction: rtl;
        font-family: BYekan, serif;
    }
    
    #header nav ul {
        margin: 0;
        padding: 0;
    }
    
    #header nav ul li {
        display: inline-block;
        margin-left: 7px;
        text-align: center;
    }
    
    #header nav ul li a {
        background-color: #f9f9f9;
        border: 1px solid #e7eff4;
        padding: 2px 20px;
        height: 100%;
        display: inline-block;
        border-radius: 3px;
    }
    
    #header nav ul li a:hover {
        background-color: #fff;
        border:...

JavaScript

https://jsfiddle.net/Baliga/96nye32c/#