JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<p>Testing 123</p>
<a class="bold-font">This is a font</a>
<p>Testing 123</p>

CSS

body {
    background-image: -moz-linear-gradient(to bottom, #055A8E 0%, #1971a7 100%);
    background-image: -ms-linear-gradient(to bottom, #055A8E 0%, #1971a7 100%);
    background-image: -o-linear-gradient(to bottom, #055A8E 0%, #1971a7 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.7, #055A8E), color-stop(1, #1971a7));
    background-image: -webkit-linear-gradient(to bottom, #055A8E 0%, #1971a7 100%);
    background-image: linear-gradient(to bottom, #055A8E 0%, #1971a7 100%);
}
.bold-font {
    color: #fff;
    padding: 15px;
    /* IE10 Consumer Preview */
    background-image: -ms-radial-gradient(center, circle farthest-corner, #055A8E 0%, transparent 90%);
    /* Mozilla Firefox */
    background-image: -moz-radial-gradient(center, circle farthest-corner, #055A8E 0%, transparent 90%);
    /* Opera */
    background-image: -o-radial-gradient(center, circle farthest-corner, #055A8E 0%, transparent 90%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, #055A8E), color-stop(0.9, transparent));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-radial-gradient(center, circle farthest-corner, #055A8E 0%, transparent 90%);
    /* W3C Markup, IE10 Release Preview */
    background-image: radial-gradient(circle farthest-corner at center, #055A8E 0%, transparent 90%);
}