JSFiddle - React, Tailwind, and code Playground

by Smartboy33

HTML

<!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="Sudarshan">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <title>SAMPLE PAGE</title>
    <!-- Theme CSS -->
    <link href="css/base_styles.css" rel="stylesheet">
 
	


    <!-- Custom Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
</head>

<body>
	
    <div id="mainPart">
	    
        <!-- Header part to be added later -->
		  <header>
            <div class="head-content">
                <img src="images/logo.png"  align="left">
                <h1 style="color:#fff;" ><strong>ABC COMPANY LIMITED</strong></h1>
                    
            </div>
        </header>
		<!--header -->
		 <!-- Navigation -->
        <nav class="x-nav">
            <ul class="nav-custom">
                <li class="nav-item nav-active"><a href="../index.php">Home</a></li>	
				
            </ul>
        </nav>
		 Main content of the page goes here
		
   


	  
        <!-- Footer -->
		<footer>
            <div class="footrow" >
                <div class="foot">
                    <div class="quarter-width">
                        <p style="color:#fff;">Address</p>
                        <hr>
                        <div>
                            ABC Company
                            <hr> Phone: 
                            <hr> Email: <a href="mailto:registrar@bsmrstu.edu.bd">abc@gmail.com</a>
                        </div>
                    </div>
                    <div class="quarter-width">
                        <p style="color:#fff;">Quick Links</p>
      ...

CSS

/*common styles for the document */
body {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
	color:#303036;
	margin:0px;
	background:url('../images/diagonal_noise.png');
	background-repeat:repeat;
	min-width:1100px;
	overflow:auto;
}

#mainPart{
	margin:0 auto;
}

h1{
    font-weight: 500;
	text-transform:uppercase;
	font-size:	30px;
	color:#fff;
	padding:5px;
	margin:0px;
}
h2{
    font-weight: 300;
	text-transform:uppercase;
	font-size:	20px;
	padding:2px;
	margin:0px;
}
h3{
    font-weight: 700;
    font-size:	10px;
	color: yellow;
	padding:2px;
	margin:0px;
}
h4{
    font-weight: 200;
	font-size:	10px;
	color:#fff;
	padding:2px;
	margin:0px;
}
h5,
h6 {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
	color:#fff;
}

p {
    font-size: 1.15em;
    color: #303036;
	padding:0px;
	-webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
	text-align:justify;
}

ul,
ol {
	margin-top: 0;
	-webkit-margin-before: 0px;
	-webkit-margin-after: 0px;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 0px;
}
ul ul,
ol ul,
ul ol,
ol ol {
	margin-bottom: 0;
	-webkit-margin-before: 0px;
	-webkit-margin-after: 0px;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start:0px;
}

a{
	text-decoration:none;
	color:inherit;
}

/*styles for header */
header{
	/*background-color:#1b4965;*/
	clear:both;
	display:block;
	overflow:hidden;
	color:#fff;
	background-image: url('../images/bg.jpg');
}

.head-content{
	max-width: auto;  /*1080px;*/
	margin:0 auto;
	margin:10px auto;
	padding:10px;
	text-align:center;
	
}

/* styles for navbar */
nav{
	display:block;
	clear:both;
	font-size: 12px;
	color:#fff;
	background:#E45641;
}
.nav-custom{
	max-width:1080px;
	margin:0px auto;
	padding:0px;
	display:block;
	list-style-type:none;
	overflow:hidden;
	border-right:1px solid #9a582d;
}
.nav-item{
	width:calc((100%/9) -...