JSFiddle - React, Tailwind, and code Playground

by itamer

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
    <link href="css/myStyles-1c.css" rel="stylesheet">
    <script>
      $(document).ready(function() {

      });

    </script>

  </head>

  <body>
    <div class="fix-rel" style="z-index:3;">
      <nav class="navbar navbar-default navbar-custom ">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle icon" data-toggle="collapse" data-target="#myNavbar">
              <span class="inner-icon">
                <span class="bar1"></span>
                <span class="bar2"></span>
                <span class="bar3"></span>
              </span>
            </button>
            <a class="navbar-brand" href="#">INet Restaurant </a>
          </div>
          <div class="collapse navbar-collapse" id="myNavbar">
            <div class="flex-container">
              <div class="flex-main" style="">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="index.html">
                      <span class="glyphicon glyphicon-home"></span> Home</a></li>
                  <li><a href="aboutus.html">About Us</a></li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
...

CSS

.fieldname{
	color:darkred;
	}
    .fieldnameicon{
	color:darkgreen;
	}
    .logintitle{
		color:yellow;
    }
    .logintitleicon{
		color:pink;
    }
	.modal-header, .close {
      background-color: #5cb85c;
      color:yellow;
      text-align: center;
      font-size: 30px;
    }
  .modal-footer {
      background-color: #f9f9f9;
    }
/*body styling side*/
	.bodycustomsd2 {
		background:#ffeecc;
		color:#e60000;
		/*height:270px;*/
	}
	/*footer styling side*/
	.footercustomsd {
		background:#ffeecc;
		color:#e60000!important;
	}
	/*panels side end*/
	.footercustomcity {
		background:#ffd480!important;
		color:#e60000!important;
		height:56px;
	}
  .warning {
		color:red;
	}
	.ok {
		color:green;
	}
	.inputstatus {
        position: static;
        background: #ccffcc;
		padding-top:7px;
		width:95%;
      }
      .feedback {
        float: right;
        right: 4px;
      }
      .star {
        float: left;
        left: 6px;
        color: green;
      }
      .error {
        position: relative;
        left: 12px;
      }
	
	.inputboxmodal1{
    	position:relative;
		color:green;
    }
	.inputboxmodal2{
    	position:relative;
		color:green;
    }
	.inputboxmodal1 .glyphicon-ok,
	.inputboxmodal2 .glyphicon-ok{
		position:static;
        top:4px;
        padding-right:5px;
    	padding-left:10px;
        color:green;
		
    }
	.inputboxmodal1 .glyphicon-remove,
	.inputboxmodal2 .glyphicon-remove{
		position:static;
        top:4px;
        padding-left:10px;
		padding-right:5px;
        color:red;
    }
	/* .glyphicon-ok, .glyphicon-remove{
		display: none;
		
    }*/
	
	#login{
		
		margin-left:10px;
		
	}
	
	#changepw{
		
		margin-left:10px;
		display:none;
	}
	.stylecls{
		font-size:36px;
		color:red;
   ...