JSFiddle - React, Tailwind, and code Playground

IPJ Details UI

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="directory-details">
  <div class="directory-details-content">
    <div data-source-entry-id="13801" class="no-margin-top">
      <div class="directory-detail-title ">Thoratec v AIS [2016] EWHC 2637 (Pat), Arnold J.</div>
      <div class="detail-share-button">
        <a href="#" class="btn btn-link">Share via email <i class="fa fa-paper-plane" aria-hidden="true"></i></a>
      </div>
      <div class="directory-detail-label">Date</div>
      <div class="directory-detail-value">24 Nov 2016</div>
      <div class="directory-detail-label">Category</div>
      <div class="directory-detail-value"><a href="#" class="data-linked" data-type="filter-value" data-filter="Category" data-value="Patents"><span class="fa fa-filter"></span> Patents</a></div>
      <div class="directory-detail-label">Court</div>
      <div class="directory-detail-value"><a href="#" class="data-linked" data-type="filter-value" data-filter="Court" data-value="High Court"><span class="fa fa-filter"></span> High Court</a></div>
      <div class="directory-detail-label">Link to full judgment</div>
      <div class="directory-detail-value">
        <a href="#" class="btn btn-primary">Click to open file</a>
      </div>
      <div class="directory-detail-label">Short summary</div>
      <div class="directory-detail-value">
        
        <div class="panel-group" id="accordionOne" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-parent="#accordionOne" href="#collapseOne">Short summary</h4>
           ...

CSS

/* DON'T USE THIS */

/* Buttons */
.btn-primary {
	display: block;
	clear: both;
	width: 100%;
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.33;
	border: none;
	border-radius: 6px;
	text-align: center;
	cursor: pointer;
}

.btn-primary:focus,
.btn-primary:hover,
.btn:active:focus {
  outline: none;
}

.btn-default {
	display: block;
	clear: both;
	width: 100%;
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.33;
	border: none;
	border-radius: 6px;
	text-align: center;
	cursor: pointer;
  background-color: #d4d4d4;
}

.btn-default:focus,
.btn-default:hover,
.btn:active:focus {
  outline: none;
}

@media (min-width:640px) {
	.btn-primary,
  .btn-default {
		clear: none;
		display: inline-block;
		width: auto;
		max-width: 100%;
	}
}

.directory-details,
.directory-list,
[data-directory],
[data-directory] > .row {
  height: 100%;
}

.directory-details {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.directory-details {
  padding: 22px 26px;
}

.directory-detail-title {
  font-size: 24px;
  font-weight: 300;
  margin-top: 1.9em;
}

.directory-detail-label {
  margin-top: 30px;
  font-size: 14px;
  opacity: 0.5;
}

.directory-detail-value {
  font-size: 16px;
}
/* END OF DON'T USE THIS */
.directory-detail-value a:not(.btn) {
  color: #CC4A44;
}

.directory-detail-title + .detail-share-button + .directory-detail-label {
  display: none;
}

.directory-detail-title + .detail-share-button + .directory-detail-label + .directory-detail-value {
  margin-top: 30px;
  color: #999;
  float: left;
  width: 50%;
}

.directory-detail-title + .detail-share-button + .directory-detail-label + .directory-detail-value + .directory-detail-label {
  display: inline-block;
  width: 22%;
}

.directory-detail-title + .detail-share-button + .directory-detail-label + .directory-detail-value + .directory-detail-label + .directory-detail-value {
  display: inline-block;
  width: 76%;
}

.directory-detail-title + .detail-share-button +...