JSFiddle - React, Tailwind, and code Playground

by mcoulont

HTML

<html>
<body>
  <p class="textContainingRule">
    <span class="startTextContainingRule">The rule</span>
    <span class="ruleInText">
      <span class="InferenceRule">
        <span class="premises" style="grid-template-columns:auto auto ;">
          <span class="premise" style="grid-column:1;">
            <span class="consequence"><a class="link" href=""></a>A<a class="link" href="">⇒</a>B<a class="link" href=""></a>
            </span>
          </span>
          <span class="premise" style="grid-column:2;">
            <span class="consequence">A</span>
          </span>
        </span>
        <span class="inferenceLine"></span>
        <span class="belowInferenceLine">
          <span class="conclusion">B</span>
        </span>
      </span>
    </span>
    <span class="endTextContainingRule">is called "Modus ponens"</span>
  </p>

</body>

</html>

CSS

.InferenceRule {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto;
}

.premises {
  grid-area: 1 / 1 / auto / auto;
  justify-self: center;
  display: grid;
  grid-auto-rows: 1fr;
}

.premise {
  grid-row: 1 / auto;
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: auto;
  align-self: center;
  padding: 0em 0.2em;
}

.consequence {
  grid-area: 5 / 1 / auto / auto;
  align-self: center;
}

a {
  color: inherit;
  text-decoration: none;
}

.link {
  padding: 0em 0.2em;
  border-radius: 0.3em;
  color: var(--links-color);
}

.link:hover {
  background-color: var(--default-color);
  color: var(--links-color-darker);
}

.inferenceLine {
  grid-area: 2 / 1 / auto / auto;
  border-bottom: 1px solid var(--default-color);
  line-height: 0.1em;
}

.belowInferenceLine {
  grid-area: 3 / 1 / auto / auto;
  justify-self: center;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto auto;
}

.conclusion {
  grid-area: 1 / 1 / auto / auto;
}

.InferenceRule {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto;
}

.premises {
  grid-area: 1 / 1 / auto / auto;
  justify-self: center;
  display: grid;
  grid-auto-rows: 1fr;
}

.premise {
  grid-row: 1 / auto;
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: auto;
  align-self: center;
  padding: 0em 0.2em;
}

.consequence {
  grid-area: 5 / 1 / auto / auto;
  align-self: center;
}

a {
  color: inherit;
  text-decoration: none;
}

.link {
  padding: 0em 0.2em;
  border-radius: 0.3em;
  color: var(--links-color);
}

.link:hover {
  background-color: var(--default-color);
  color: var(--links-color-darker);
}

.inferenceLine {
  grid-area: 2 / 1 / auto / auto;
  border-bottom: 1px solid var(--default-color);
  line-height: 0.1em;
}

.belowInferenceLine {
  grid-area: 3 / 1 / auto / auto;
  justify-self: center;
  display: grid;
  grid-template-rows: auto;
 ...