JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<link rel="stylesheet" href="https://assets.digital.cabinet-office.gov.uk/static/fonts-5ff8c53913434afd0072a480d7cfca67cace4c8d03f6ef96b78a4455728ce745.css">
<div class="block">
  <h2 class="block__title">Update team bookings</h2>
  <div class="block__content">
    <dl>
      <dt class="booking-state booking-state--pending">Pending approval</dt>
      <dd>
        <ul>
          <li>
            <div class="booking">
              <span class="booking__username">Clint Eastwood</span>
              <div class="booking__training-event">
                <span class="booking__training-event-type">Financial Investigator</span>
                <span class="booking__training-event-venue">The Shard</span>,
                <span class="booking__training-event-date">26/2/2016</span>
              </div>
              <div class="booking__actions">
                <a href="#">Approve</a>
                <a href="#">Reject</a>
              </div>
            </div>
          </li>
          <li>
            <div class="booking">
              <span class="booking__username">Cliff Westwood</span>
              <div class="booking__training-event">
                <span class="booking__training-event-type">Financial Intelligence Officer</span>
                <span class="booking__training-event-venue">Guiness Brewery</span>,
                <span class="booking__training-event-date">3/3/2016</span>
              </div>
              <div class="booking__actions">
                <a href="#">Approve</a>
                <a href="#">Reject</a>
              </div>
            </div>
          </li>
        </ul>
      </dd>
      <dt class="booking-state booking-state--reserved">Unassigned</dt>
      <dd>
        <ul>
          <li>
            <div class="booking">
              <span class="booking__reserved">5 places reserved</span>
              <div class="booking__training-event">
                <span class="booking__training-event-type">Confiscator</span>
              ...

SCSS

$gutter-half: 15px;

/* Our own colours to use in addition to GOV.UK ones*/
$nca-black: #111;
$nca-grey-1: #212121;
$nca-grey-2: #555;
$nca-grey-3: #a8a8a8;
$nca-brown-1: #7c6a55;
$nca-brown-2: #c9bbaf;
$nca-brown-3: #e2d9d1;
$nca-brown-4: #ebe4df;
$nca-blue-1: #006792;
$nca-blue-2: #0086be;

// These colours are taken from the NCA brand guidelines.
// Google Drive: Assets from NCA/NCA_Guidelines_v6.pdf
$nca-grey: #80715D;
$nca-blue: #0086be;
$nca-orange: #e59000;     // Organised crume
$nca-dark-blue: #497593;  // Child exploitation and online protection
$nca-green: #86a315;      // Border policing
$nca-red: #7b003a;        // Economic crime
$nca-light-blue: #008295; // Operations
$nca-purple: #7a68ae;     // Intelligence and co-ordination and tasking

$block-spacing: 15px;

html {
  font-family: nta;
}

.block {
  background-color: $nca-brown-4;
  border: none;
  margin: 0 0 $block-spacing;
  max-width: 420px;
}

.block__title {
  font-size: 1.17em;
  line-height: 1.28205em;
  padding-top: 0.76923em;
  padding-bottom: 0.51282em;
  background: none;
  border-bottom: 1px solid $nca-brown-3;
  color: $nca-grey-1;
  padding: {
    left: $gutter-half;
    right: $gutter-half;
  }
}

.block__content {
  padding: 0.75em $gutter-half;
}

h2, p {
  margin: 0;
}