JSFiddle - React, Tailwind, and code Playground

by sampottinger

HTML

<html>

  <head>
    <title>Data Driven Empathy</title>
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  </head>

  <body>
    <div class="content-float">
      <div class="content-holder">
        <div class="head">
          <div class="header">
            Data Driven Emapthy LLC
            <div class="right">
              <a href="/tos_privacy">Terms and Privacy >></a>
            </div>
          </div>
          <div class="subheader">
            <div class="float-image left">
              <img src="https://www.datadrivenempathy.com/static/viz_2.png">
            </div>
            <div class="float-image right">
              <img src="https://www.datadrivenempathy.com/static/viz_1.png">
            </div>
            <div class="float-text">
              <div>Sam Pottinger</div>
              <div class="subdued">
                User Centered Data Science Consultant
              </div>
            </div>
          </div>
        </div>
        <div class="body">
          <div>
            <div class="section">
              <div class="title">Introduction</div>
              <div class="content">What do <a href="https://engineering.stanford.edu/magazine/article/movements-fish-and-birds-inspire-wind-power-generation-improvement">fish and wind farms common</a>? How is <a href="http://blogs.discovermagazine.com/notrocketscience/2010/01/21/slime-mould-attacks-simulates-tokyo-rail-network/#.XHQmFS2ZNbU">mold like public transit</a>?
                Computer science can be a tool to help see the full complexity of your problem space and mathematics can create coherence out of a cloud of data points. However, without human understanding, all of it is a canvas without paint. So, consider that
                software can be a way to respectfully understand the richness of your dataset. Algorithms can be understandable and made visual. Data can be the medium of empathy if it is treated right.</div>
            </div>
      ...

CSS

a {
  color: #61A1E8;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
}

.content-holder {
  padding: 0 30px;
  min-width: 570px;
  max-width: 900px;
  margin: 0 auto;
}

.float-image {
  opacity: 0.8;
}

.float-image img {
  width: 150px;
}

.float-image.left {
  float: left;
}

.float-image.right {
  float: right;
}

.float-text {
  padding-top: 40px;
  margin-left: 27%;
}

.head .header {
  font-size: 14px;
  border-bottom: 1px solid black;
  padding-bottom: 2px;
}

.head .right {
  float: right;
}

.head .subheader {
  margin-top: 20px;
  font-size: 30px;
  height: 170px;
}

.head .subheader .subdued {
  font-size: 14px;
}

.section {
  margin-top: 5px;
  margin-bottom: 15px;
}

.section .title {
  color: black;
}

.section .content {
  color: #888;
}