JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<body>
    <!--page header-->
    <div class="container-fluid">
        <div class="page-header">
            <h1 style="font-size: 1.75em;font-weight:inherit">Inventory</h1>
        </div>
    </div>
    <div class="container-fluid">
     <div class="col-lg-12">
         <div class="row">
             <ol class="breadcrumb">
                 <li><a href="#">Home</a></li>
                 <li class="active" style="color:#333">View</li>
             </ol>
         </div>
     </div>
    </div>

    <div class="container-fluid">
    <div class="col-lg-6">
     <div class="row">
         <h2>All Tickets</h2>
         <p>All Tickets that you have permission to view</p>
          <h4 style="padding-top:20px;">
          <span>Search:</span>
          <span><strong>None</strong></span>
               <span>|</span>
               <span class="items"><a href="#">Change Filter</a></span>
               <span class="items"><a href="#">Refresh</a></span>
               <span class="items"><a href="#">Export</a></span>
          </h4>
     </div>
    </div>
        <div class="col-lg-6">
            <div class="row">
              <div class="col-lg-3 pull-right clearfix">
                  <div class="well">
                    <h4>455</h4>
                    <h4>Tickets</h4>
                  </div>
              </div>   
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="col-lg-12">
            <div class="row">ss
                <table class="table table-bordered table-striped">
                    <tr>
                        <th>Reference Number</th>
                        <th>Name</th>
                        <th>Reported by</th>
                        <th>Submitted by</th>
                        <th>Incident State</th>
                        <th>Impact</th>
                        <th>Urgency</th>
                        <th>Priority</th>
                        <th>Assigned to</th>
                       ...

CSS

.page-header h1
        {
           font-size:24px;
        }
         .page-header
        {
          margin-top:10px;
        }

         .breadcrumb
         {
            background-color:white;
            padding:0px;
            margin-top:-15px;
            font-family:"Segoe UI","Segoe WP","Helvetica Neue",sans-serif;
         }
         .breadcrumb > li + li:before {
             color: #337ab7;
             content: "\009B";
             padding: 0 5px;
             font-size:20px;
             padding-top:0px;
             padding-right:20px;
             
        }

           .breadcrumb > li 
           {
               padding-right:10px;
           }

         body
         {
            font-family: "Segoe UI","Segoe WP","Helvetica Neue",sans-serif;
            font-size:14px;
            color:#333;  
         }

         h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
         {
             font-weight:100;
             font-family: "Segoe UI","Segoe WP","Helvetica Neue",sans-serif;

         }

         .items
         {
            margin-right:30px;
         }

         .well{
           background-color: MediumTurquoise ;
           text-align:center;
           height:140px;
           width:140px;
           border:none;
           border-radius:0px;
           color:white;
         }

         .table th
         {
            font-weight:normal;
         }