JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<style type="text/css">
.story               {font-family: 'Helvetica Neue', Helvetica, Arial;color: #252525;font-size: 11pt;}
.story .head1        {font-size: 24pt;line-height: 0pt;font-family: Consolas, 'Courier New', Courier;text-align: center;display: block;}
.story .head2        {font-size: 11pt;line-height: 11pt;font-family: Consolas, 'Courier New', Courier;color: #999;text-align: center;display: block;}
.story .ptitle       {font-size: 11pt;margin-bottom: 5px;}
.story .pdescription {font-size: 10pt;color: #666;}
.story .pmini        {color: #999;font-size: 10pt;}
.story .pnote        {color: #999;}
.story .tjk          {font-size: 14pt;color: #444;font-weight: bold;}
</style>
<div class="story" style="font-family: 'Helvetica Neue', Helvetica, Arial;color: #252525;font-size: 11pt;">
<span class="head2" style="font-size: 11pt;line-height: 11pt;font-family: Consolas, 'Courier New', Courier;color: #999;text-align: center;display: block;">EXTREME MAKEOVER: WEB EDITION</span><br/>
<span class="head1" style="font-size: 24pt;line-height: 0pt;font-family: Consolas, 'Courier New', Courier;text-align: center;display: block;">JSFIDDLE.NET</span><br/>
<br/><br/>
I’m going to be starting a weekly column on Forrst called Extreme Makover: Web Edition. It’s a column about changes to features, interfaces, designs, etc. of some of the biggest websites and web apps. It’s all about improvement, because every site could use some.
<br/><br/>
<span class="pdescription" style="font-size: 10pt;color: #666;">Pssst’ These posts are me preparing my site with content for the eventual launch. You’ll be able to see it them there later this year.</span>
<br/><br/><hr><br/>
This week we have JSFiddle.net, by its own definition:
<br/><br/>
<span class="pdescription" style="font-size: 10pt;color: #666;">“A playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript.”</span>
<br/><br/>
JSfiddle is...

CSS

.story {
    font-family: 'Helvetica Neue', Helvetica, Arial;
    color: #252525;
    font-size: 11pt;
}
.story .head1 {
    font-size: 24pt;
    line-height: 0pt;
    font-family: Consolas, 'Courier New', Courier;
    text-align: center;
    display: block;
}
.story .head2 {
    font-size: 11pt;
    line-height: 11pt;
    font-family: Consolas, 'Courier New', Courier;
    color: #999;
    text-align: center;
    display: block;
}
.story .ptitle {
    font-size: 11pt;
    margin-bottom: 5px;
}
.story .pdescription {
    font-size: 10pt;
    color: #666;
}
.story .pmini {
    color: #999;
    font-size: 10pt;
}
.story .pnote {
    color: #999;
}
.story .tjk {
    font-size: 14pt;
    color: #444;
    font-weight: bold;
}