JSFiddle - React, Tailwind, and code Playground

by agusesetiyono

HTML

<div>
	<p><strong>Hello,</strong> Here i will share <a href="http://static.googleusercontent.com/design/material-design.pdf">Google Material Design eBook</a>. </p>
	<p>You can going to <a href="http://www.google.com">my website</a> or drop me <a href="mailto:[email protected]">Email</a> for more info.</p>
</div>

CSS

div{
    margin: 40px;
    padding: 20px;
    background-color: #e6ee9c;
}

p{
    font-family: Arial;
    font-size: 20px;
    color: #555;
}

a{
    font-weight: bold;
    text-decoration: none;
}



a[href^="http://"]{
    padding-right: 28px;
    color: #188FD1;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC+ElEQVRIia2Vy2sUQRDGy0QNhqjZ3Znq+AoKXoIvEA+KOQT0InoSvQiCIOhBAoniRUT3EM1uprtyENT8A6KrF0ESUVCJz3VnumojHhTUgw8kF/FgfMWMh2yyyWQ20WhDXYaar76u+nU3wP9Yrb01qWzQlPTslmTm6RpoSc/9Z8269ENUWtpdsv3KyI+G7mI4FsrI+2Q22PyHUmGV4xVakJhc4ntKy0tF/AqJv48JohZWhtucLn/jYi+/CrXdjyQWIKyaVtrx/J1o5PlEd3GBRgbR2KPQ488b+xe1PZbwCmvjlffm5iNxz0zC0VAk+VTHo2UAACljt2FXYetU8R5/niK5Uerl8F8XMfImmX2y3PF4X33n45VT9JWx50bd8G1FcudvCzR0F0PXWF9RcAbCcM4kcVf7zYr4FxIfRyMXI85eu4YPJDJ+Y136Iaa8ge1I0lexCNmrU9yjlpuutntQc1ckOWg8P5CYClg4J5o7PniyX+vO9rvjufWdj1c6Hu9zyR6MOB9e1BmsjqcBACCscokL8fPgtnJee25BwgvWo+FvkaRblcVLrTV8JH4X0lfOaknPRS0cQ8VrZeTydIFG7lfA9sMEerhtNsTMgOwwAAA0nh9IoJFP/70Ayc9RegyfruzCXneydtOsosvfOHotGBmsVACN3J9pyNMux/N3lvr1uQJqI6ls0DQtRdruUCQno5HI+OsASS6UDsapSidTaVtceDafihf3m5FkKAbRoYVp3wGlbVEZHqnNPljqZO0mZXgk9uhrfrtEDxxKdjxdAem7dQmvsFYZm4k+NuXWcro0YPniEhfKuNrMv9LjEhegtbcGAABKLbg0vudcrlqRXJk1mlpe1p7pXwJlx/xRkdyZ1NhcrhoNe7MQvzvpggMAcA13NHQXQ9TB7vGPrb01jgl2KZK8IpaZhJHkHZrgMORy1TEchFVKSzuSvFBanqGWm2jkGprgcCLjLwYAqM/YDa7mE2jkmtL8SJHkkaQPjRhX2x0T3+Lo+g2ceJ2EyCf1/AAAAABJRU5ErkJggg==) no-repeat center right;
}

a[href^="mailto:"]{
    padding-right: 28px;
    color: #E96966;
   ...