JSFiddle - React, Tailwind, and code Playground

by edwardsharp

HTML

<div class="SearchHelp">
  <div class="row">
    <div class="icon">
      <b>[</b><i>key</i> <i>words</i><b>]</b>
    </div>
    <div class="content">
      <h1>
        Basics
      </h1>
      <p>
        The simplest way to search Emergency INDEX is to just enter a keyword in the text box above <span role="img" aria-label="pointing finger up">
          ☝
        </span>
      </p>
      <p>
        <b>example:</b> <b class="q">dance</b>
        will find projects that contain the keyword <i>dance</i>.
      </p>
      <h2>
        multiple keywords
      </h2>
      <p>
        <b>example:</b> <b class="q">dance noise</b>
        will find projects that contain the keyword <i>dance</i> OR contain the keyword <i>noise</i>.
      </p>
    </div>
  </div>

  <div class="row">
    <div class="icon">
      <b>[</b>
      +<i>present</i>
      <i>-absent</i>
      <b>]</b>
    </div>
    <div class="content">
      <h1>
        Term Presence
      </h1>
      <p>
        To indicate that the keyword must be present it should be prefixed with a plus (<b>+</b>) and to indicate that a keyword must be absent then it should be prefixed with a minus (<b>-</b>). Without either <b>+</b> or <b>-</b> the term will be optional.
      </p>
      <p>
        <b>example:</b> <b class="q">+dance +noise -duration</b> will find projects that contain the term <i>dance</i> AND <i>noise</i> but will not include any projects that contain the term <i>duration</i>.
      </p>
    </div>
  </div>

  <div class="row">
    <div class="icon">
      <b>[</b>
      *
      <b>]</b>
    </div>
    <div class="content">
      <h1>
        Wildcards
      </h1>
      <p>
        Represented as an asterisk (<b>*</b>) that can appear anywhere in the keyword.
      </p>
      <p>
        <b>example:</b> <b class="q">key*</b> will find projects that contain a keyword that starts with <i>key</i> (e.g. <i>keyword</i> or <i>keyring</i>).
      </p>
      <p>
        <b>example:</b> <b...

CSS

.SearchHelp>.row {
  display: flex;
}

.SearchHelp>.row>.icon {
  width: 25vw;
  align-self: center;
  text-align: center;

}

.SearchHelp>.row>.icon i {
  font-size: 1.25em;
}

.SearchHelp>.row>.icon b {
  font-size: 1.5em;
  margin: 0.5em;
}

.SearchHelp>.row>.content {
  width: 75vw;
}

.SearchHelp>.row>.content table>thead>tr {
  font-style: italic;
  border-bottom: thin solid #ddd;
}
.SearchHelp>.row>.content tbody>tr>td:nth-child(1) {
  text-align:right;
  font-weight: bold;
}
.SearchHelp>.row>.content tr>td:nth-child(2) {
  padding-left: 1em;
}
.SearchHelp .q {
  background-color: #ddd;
  color: #666;
  padding: 1px.25em;
}