JSFiddle - React, Tailwind, and code Playground

by Rafa Ola

HTML

<div>
<p>
Changing Things
</p>
</div>

<div class='padbox'>
<p>
Away
</p>
</div>

<code class="border-circle">2px <br> solid</code>

<code class="border-solid">2px <br> solid</code>

<code class="border-double">6px <br> double</code>

<code class="border-dashed">8px <br> dashed</code>

<code class="border-dotted">4px <br> dotted</code>

<p>You can use borders to create custom underlines on hyperlinks, like this:</p>
<p>Go to the <a target="_blank" href="http://www.quackit.com">Quackit Homepage</a>.</p>

<div class=webbiekit>
<p> Treeezieee</p>
</div>

CSS

div{
  border: 6px solid #949599;
  margin: 20px;
  padding: 20px;  
  width:30%;
  text-align:center;
 }
 .padbox {
  box-sizing: padding-box;
 
  
}
code {
  background: #eaeaed;
  color: #666;
  font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
  display: inline-block;
  height: 70px;
  margin: 0 14px;
  padding-top: 20px;
  text-align: center;
  width: 90px;
}
.border-solid {
  border: 2px solid #9799a7;
}
.border-circle {
  border-radius:50%;
}
.border-double {
  border: 6px double #9799a7;
}
.border-dashed {
  border: 8px dashed #9799a7;
}
.border-dotted {
  border: 4px dotted #9799a7;
}

  a {
    font-size: 2em;
    color: limegreen;
    text-decoration: none;
    border-bottom: 1px solid darkorange;
  }
  a:hover {
    color: darkorange;
    border-width: 3px;
  }
  
  .webbiekit {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}