JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<h1>
  Elements
</h1>
<h3>Inline Element example</h3>
<div>
/Users/jonathan/Documents/workspace/alltrails/app/assets/javascripts/react_components/search/fullscreen/search_result_list.js.jsx  <span>This is an inline element.</span>
  <span> So is this.</span>
   <span> Notice these elements display on one line?</span>
</div>

<h3>Block Element example</h3>
<div>
  <p>This is a Block element.</p>
  <p> So is this.</p>
   <p> Notice these elements display on their own line?</p>
</div>
<h1>
  Containers
</h1>
<h3>Block Container example</h3>
<div>
  <p>Div is a block element by default.</p>
  <p> Block elements expand to the max width of their container by default.</p>
  <span class="right">This is right-aligned, but it's an inline element.</span>
  <p class="right"> Notice this right-aligned element expands with the body?</p>
</div>

<h3>Inline-Block Container example</h3>
<div class="container">
  <p>This is the first line of text, aligned to the left. It is the widest so the container will expand.</p>
  <p class="right">This is right-aligned</p>
  <span class="right">So is this, but it's an inline element.</span>
  <p class="right">Notice the text aligns to the widest element in the container?</p>
</div>
<h3>Inline-Block Multiple Container example</h3>
<div class="container">
  <p>Notice this pair of containers will be on the same line</p>
  <p>but only if the body is wide enough.</p>
  <p class="right">This is right-aligned</p>
</div>
<div class="container">
  <p>Notice this entire container will be on the same line as the first</p>
  <p>If you shrink the body it moves to the next line.</p>
</div>

<h3>Inline Container example</h3>
<span>
  <p>This is the first line of text, aligned to the left. It is the widest so the container will expand to contain it.</p>
  <p class="right">This is right-aligned</p>
  <span class="right">So is this, but it's an inline element.</span>
  <p class="right">Notice this right-aligned element expands with the...

CSS

body{
  color: #666;
  font-family: sans-serif;
  font-size: 12px;
  background-color: #f1f1f1;
  margin: 0px 40px;
}

h1{
  padding: 20px 0px;
  border-bottom: 1px dotted gray;
}

h3{
  padding: 4px;
  font-weight: 600;
}

div{
  padding: 4px;
  border: 1px solid red;
  margin: 0px 8px;
  background-color: #fcfcfc
}
p{
  padding: 2px;
  border: 1px solid red;
}

span{
  padding: 4px;
  border: 1px solid blue;
}

.container{
  display: inline-block;
  border: 2px solid green;
}
.right{
  text-align: right;
}