JSFiddle - React, Tailwind, and code Playground

by rishi007bansod

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.2.1/cerulean/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="panel panel-default mainpanel">
           <div class="panel-heading">
                   File Browser
                   <span class="up">
                    <i class="fa fa-level-up"></i> Up
                   </span> 
           </div>
      <div class="panel-body">
              <table class="linksholder">
              </table>
      </div>

  </div>

CSS

body { left:10%;width:80%;position:absolute; top:10%; color: black!important;}

.mainpanel { height:90%;min-height:400px;}

.linksholder ul { list-style-type: none; }

.linksholder li { font-size: 16px; line-height: 1.5em;}

.linksholder li .fa { margin-right: 5px; }

.linksholder a { color : black;}

.linksholder .fa { color: black;}

.dataTables_filter label { float: right; font-weight:normal; position: absolute; top : 10px; right: 5px; }

.dataTables_info { margin-top: 10px; background: ghostwhite; }

.up { margin-left: 20px; border:solid 1px black; cursor:pointer; width:100px; padding-left: 10px; padding-right:10px; }