JSFiddle - React, Tailwind, and code Playground

by lsauer

HTML

<html>
    
    <head>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
            <style>
            .bs-callout-warning {
background-color: #fefbed;
border-color: #f1e7bc;
}
.bs-callout {
margin: 20px 20px;
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
}
                @media screen and (min-width: 768px)
.bs-example {
margin-left: 0;
margin-right: 0;
background-color: #fff;
border-width: 1px;
border-color: #ddd;
border-radius: 4px 4px 0 0;
box-shadow: none;
}
.bs-example {
position: relative;
padding: 45px 15px 15px;
margin: 10px 15px 15px;
background-color: #fafafa;
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
}
                .bs-example:after {
content: "Examples";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px;
}
blockquote {
padding: 0 0 0 15px;
margin: 0 0 20px;
border-left: 5px solid #eeeeee;
}
blockquote p {
margin-bottom: 0;
font-size: 17.5px;
font-weight: 300;
line-height: 1.25;
}
p {
margin: 0 0 10px;
}
blockquote small {
display: block;
line-height: 20px;
color: #999999;
}
small {
font-size: 85%;
}
.bs-fieldset {
position: relative;
margin: 15px 15px;
padding: 39px 19px 14px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
            </style>
    </head>
    
    <body>
        <br>
            <div class="bs-fieldset after-navigation">
        <blockquote>
        <p>Form-submit event firing before the submit-button: Demonstrations of event hiearchy </p>
                </blockquote>
        <div class="bs-callout bs-callout-warning">
        <p>
                    <b>Why:</b> The event hiearchy of the input element is inherited, and positioned after the events of an enclosing form.<br>
                    <b>Solution:</b> Use the <a...