JSFiddle - React, Tailwind, and code Playground

by Daffa Aditya

HTML

<div class="line">This is Dashed</div>
<div class="line1">This is Dotted</div>
<div class="line2">This is Double</div>
<div class="line3">This is Groove</div>
<div class="line4">This is Inset</div>
<div class="line5">This is Outset</div>
<div class="line6">This is Ridge</div>
<div class="line7">This is Solid</div>

CSS

.line {
    width:auto;
    height:auto;
    padding:7px;
    text-align:center;
    margin-bottom:10px;
    border:dashed 2px #000;
}
.line1 {
    width:auto;
    height:auto;
    padding:7px;
    text-align:center;
    margin-bottom:10px;
    border:dotted 2px #000;
}
.line2 {
    width:auto;
    height:auto;
    padding:7px;
    text-align:center;
    margin-bottom:10px;
    border:double 2px #000;
}
.line3 {
    width:auto;
    height:auto;
    padding:7px;
    text-align:center;
    margin-bottom:10px;
    border:groove 2px #000;
}
.line4 {
    width:auto;
    height:auto;
    padding:7px;
    text-align:center;
    margin-bottom:10px;
    border:inset 2px #000;
}
.line5 {
    width:auto;
    height:auto;
    padding:7px;
    text-align:center;
    margin-bottom:10px;
    border:outset 2px #000;
}
.line6 {
    width:auto;
    height:auto;
    padding:7px;
    text-align:center;
    margin-bottom:10px;
    border:ridge 2px #000;
}
.line7 {
    width:auto;
    height:auto;
    padding:7px;
    text-align:center;
    margin-bottom:10px;
    border:solid 2px #000;
}