JSFiddle - React, Tailwind, and code Playground

by kpowz

HTML

<h1>
Product Owner
</h1>
<table>
<thead>
  <tr><th>instead of this</th><th>ask this</th><th>answer</th><th>alternatives</th></tr>
</thead>
<tbody>
  <tr>
    <td>build me a bridge because that's what stakeholder wants</td>
    <td>what is the problem & it's context?</td>
    <td>neighbors running out of bread</td>
    <td>build an oven, build a ferry that ships bread once or twice a day</td>
  </tr>
  <tr><td> ...because business reasons</td><td>hi</td><td></td><td></td></tr>
  <tr><td>reqirements</td><td>what is the need you are trying to solve</td><td></td><td></td></tr>
  <tr><td>it was in the requirements you ignored it</td><td>hi</td><td></td><td></td></tr>
  <tr><td>just do it</td><td>i want us to test this and this is how we will know if it</td><td></td><td></td></tr>
</tbody>
</table>


<h1>
Software Dev
</h1>
<table>
<thead>
  <tr><th>instead of this</th><th>this</th></tr>
</thead>
<tbody>
  <tr><td>invalid</td><td>hi</td></tr>
  <tr><td>no value</td><td>hi</td></tr>
  <tr><td>unrelated</td><td>hi</td></tr>
  <tr><td>no</td><td>hi</td></tr>
  <tr><td>doesn't make sense</td><td>i want us to test this and this is how we will know if it</td></tr>
</tbody>
</table>

CSS

@charset "UTF-8";html{font-family:"PT Serif",Georgia,serif;font-size:100%;line-height:1.6;background:#fff;color:#000;-webkit-overflow-scrolling:touch}body{margin:1em;font-size:1rem}@media (min-width:20rem){body{font-size:calc(1rem + .0125*(100vw - 20rem))}}@media (min-width:40rem){body{font-size:1.25rem}}body article,body footer,body header,body main{position:relative;max-width:40rem;margin:0 auto}body>header{margin-bottom:3.5em}body>header h1{margin:0;font-size:1.5em}body>header p{margin:0;font-size:.85em}body>footer{margin-top:4.5em;padding-bottom:1.5em;text-align:center;font-size:.8rem;color:#aaa}details,nav,p{margin:1em 0}nav ul{list-style:none;margin:0;padding:0}nav li{display:inline-block;margin-right:1em;margin-bottom:.25em}nav a:visited{color:#0064c1}article header h1 a:visited:hover,article header h2 a:visited:hover,nav a:hover{color:#3000c1}ol,ul{margin-top:0;padding-top:0;padding-left:2.5em}p{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}aside:first-child,p:first-child{margin-top:0}aside:last-child,p:last-child{margin-bottom:0}p+ol,p+ul{margin-top:-.75em}p img,p picture{float:right;margin-bottom:.5em;margin-left:.5em}p picture img{float:none;margin:0}blockquote,dd{padding-left:2.5em}dd{margin-bottom:1em;margin-left:0}dt{font-weight:700}blockquote{margin:0}aside{margin:.5em 0;font-style:italic;color:#aaa}@media (min-width:65rem){aside{position:absolute;right:-12.5rem;width:9.375rem;max-width:9.375rem;margin:0;padding-left:.5em;font-size:.8em;border-left:1px solid #f2f2f2}}section+section{margin-top:2em}h1,h2,h3,h4,h5,h6{margin:1.25em 0 0;line-height:1.2}h1:focus>a[href^='#'][id],h1:hover>a[href^='#'][id],h2:focus>a[href^='#'][id],h2:hover>a[href^='#'][id],h3:focus>a[href^='#'][id],h3:hover>a[href^='#'][id],h4:focus>a[href^='#'][id],h4:hover>a[href^='#'][id],h5:focus>a[href^='#'][id],h5:hover>a[href^='#'][id],h6:focus>a[href^='#'][id],h6:hover>a[href^='#'][id]{opacity:1;transition:opacity 0s,color 300ms...