JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<style>
  body {
    width: 250px;
  }

  .block {
    display: block
  }

  .inline-block {
    display: inline-block;
  }

  .inline {
    display: inline;
  }

  .outline {
    outline: solid 2px #00F;
  }

  em {
    padding: 2px;
    margin: 1em;
    border-width: medium;
    border-style: dashed;
    line-height: 2.4em;
  }

  p {
    line-height: 1.5em;
    border: solid 2px #F00;
  }

  p span {
    display: block
  }

  h1 {
    font-size: 16px;
    color: #00f;
  }
</style>

<h1>
  行内元素：
</h1>
<div>Several <em>emphasized words emphasized words emphasized words</em> appear here.</div>

<h1>
  行内元素，带轮廓：
</h1>
<div>Several <em class="outline">emphasized words emphasized words emphasized words</em> appear here.</div>


<h1>
  行内元素被块级元素截断：
</h1>
<p class="inline">
  This is anonymous text before the SPAN.
  <span>This is the content of SPAN.</span> This is anonymous text after the SPAN.
</p>