JSFiddle - React, Tailwind, and code Playground

by nicorellius

HTML

<div class="byline">
  <h4 class="crp-h">Validate List</h4>
  <p class="crp-p">My Widget makes sophisticated data analysis easy</p>
</div>

<div class="toggle-content">
  <ul class="crp-list">
    <li>Brackets are organized to show at a glance</li>
    <li>Which brackets are present in each sample</li>
    <li>Patterns of differential expression across samples</li>
    <li>Probability scores of the widget identifications</li>
    <li>Weedjeets and spectra support each protein identification</li>
    <li>Each wydjyt can be viewed and manually validated</li>
    <li>Multiple search engines can be combined in a single analysis</li>
  </ul>
</div>

<div class="byline">
  <h4 class="crp-h">Validate List</h4>
  <p class="crp-p">My Widget makes sophisticated data analysis easy</p>
</div>
<div class="toggle-content">
  <ul class="crp-list">
    <li>Brackets are organized to show at a glance</li>
    <li>Which brackets are present in each sample</li>
    <li>Patterns of differential expression across samples</li>
    <li>Probability scores of the widget identifications</li>
    <li>Weedjeets and spectra support each protein identification</li>
    <li>Each wydjyt can be viewed and manually validated</li>
    <li>Multiple search engines can be combined in a single analysis</li>
  </ul>
</div>

CSS

div[class^='crp'] {
	height: 100px;
}

span.crp-sub {
	color: #7ca60a;
	font-size: 0.8em;
}

.container-subtitle {
	padding-top: 25px;
	padding-bottom: 0px;
	padding-left: 5px;
	padding-right: 5px;
	display: block;
	width: 500px;
	height: auto;
	float: left;
}

.crp-subtitle {
}

.crp-buttons {
	padding-left: 15px;
}

.crp-buttons .learn-more-button {
	padding: 0px 0px 20px 30px;
	margin: 0px;
}

.crp-buttons .get-started-button {
	padding: 0px 0px 20px 0px;
	margin: 0px;
}

.crp-heading {
	text-transform: capitalize;
}

.crp-heading-non {
	text-transform: none;
}

.crp-heading-non em {
	font-style: italic; 
}

.crp-p {
	color: #6d6e70;
	padding: 5px 5px 0px 10px;
}

.crp-h {
	color: #404041;
	padding: 5px 5px 0px 10px;
}

.byline {
	float: left;
	cursor: pointer;
}

.byline .crp-p, .byline .crp-h {
	padding-right: 10px;
}

.crp-icons {
	padding: 10px 10px 10px 25px;
	float: left;
}

.crp-box, .toggle-content {
	float: left;
	width: 400px;
	border: solid 1px gray;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin: 5px 2px;
	padding: 5px 5px 5px 10px;
}

.crp-box {
	background-color: #efefef;
}

.toggle-content {
	background-color: #ccc;
}

.toggle-content .crp-list ul li {
	list-style: circle !important;
}

#container-1, #container-2, #container-3, #container-4, #container-5,
#container-6, #container-7, #container-8, #container-9, #container-10 {
	background-color: transparent;
	padding: 10px 5px;
	display: block;
	width: 500px;
	height: auto;
	float: left;
}

#container-bottom {
	padding: 15px 5px;
	display: block;
	width: 500px;
	height: auto;
	float: left;
}

JavaScript

// expanding, collapsing div script
$(document).ready(function() {
	$(".toggle-content").hide();
	$(".byline").click(function() {
    $(".toggle-content").hide();
		$(this).next(".toggle-content").slideToggle(500);
	});
});