JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

  <!-- ########################### HEADER ########################### -->
  <section class="fixed-top">

    <div class="header">
      <table id="maintable-header">
        <thead class="align-text-top">
          <tr class="menu">
            <th scope="col" style="width: 5%"></th>
            <th scope="col" style="width: 17.5%">Lorem Ipsum</th>
            <th scope="col" style="width: 35%; height: 2%">
              <p class="about">About/Contact</p>
            </th>
            <th scope="col" style="width: 35%"></th>
            <th scope="col" style="width: 7.5%"></th>
          </tr>
        </thead>
        <tbody>
          <tr class="info">
            <td></td>
            <td></td>
            <td class="align-text-top">
              <p class="info-bio" style="padding-right: 6em;">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus mollitia est consectetur soluta facilis enim doloribus magni, velit quis autem aperiam iste voluptatum odit assumenda? Perspiciatis itaque minus deleniti sapiente earum, sint sed perferendis,
                maxime quibusdam et fugiat qui excepturi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus mollitia est consectetur soluta facilis enim doloribus magni, velit quis autem aperiam iste voluptatum odit assumenda?
                <br><br><br>
              </p>
            </td>
            <td>

            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>

 ...

CSS

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

td {
  padding-top: 1%;
  padding-bottom: 1%;
}

th {
  padding-bottom: 1%;
}

/* ####################################### HEADER ####################################### */

.fixed-top {
  background-color: white;
}

.menu {
  height: 20vh;
  font-weight: 400 !important;
}

.about {
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
}

.header-name {
  width: 5%;
}

.header-about {
  width: 7.5%;
}

.info {
  display: none;
  background-color: white;
}

.link-mail {
  text-decoration: none !important;
  color: black !important;
}

/* ####################################### MAIN TABLE ####################################### */

.main {
  height: auto;
  width: 100%;
  padding-top: 5%;
}

#maintable {
  width: 100%;
  margin-top: 1%;
}
.second-header {
  position: fixed;
  top: 9%;
  background:#fff;
  text-align: center;
}

.tableHeader {
  width: 25%;
}

#maintable1 {
  width: 100%;
  margin-top: 1%;
}

#maintable-header {
  width: 100%;
}

.rowheader {
  display: table-row;
  border-bottom: none !important;
  border-top: 1px solid black;
  height: 50px;
  cursor: pointer;
}

.projectinfo {
  display: none;
}

.row {
  padding-bottom: 1%;
}

JavaScript

// HEADER

$(".about").click(function() {
  $(".info").toggle();
});


// MAINTABLE

$("#rowheader1").click(function() {
  $("#projectinfo1").toggle();
});