JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<section class="pillars">
    <ul class="accordion">
        <li tabindex="0" class="panel" id="panel-lightbeam">
             <h2 class="panel-title"><i>Watch</i> the watchers</h2>

            <div class="panel-inner">
                <div class="panel-content"> <a href="/en-US/lightbeam/">
              <h3>See who’s watching you online</h3>
              <p>Shine a light on the third parties that are collecting data about your online activity.</p>
              <p class="go">Install the Lightbeam add-on</p>
            </a>

                </div>
            </div>
        </li>
        <li tabindex="0" class="panel" id="panel-fxdesktop">
             <h2 class="panel-title"><i>Try the best</i> Firefox yet</h2>

            <div class="panel-inner">
                <div class="panel-content"> <a href="/en-US/firefox/desktop/">
                            <h3>Try the best Firefox yet</h3>
              <p>Learn more about the free desktop browser that’s committed to you, your privacy and an open Web.</p>
              <p class="go">See what’s new</p>
            </a>

                </div>
            </div>
        </li>
        <li tabindex="0" class="panel" id="panel-sumo">
             <h2 class="panel-title"><i>Help</i> Mozilla users</h2>

            <div class="panel-inner">
                <div class="panel-content"> <a href="https://support.mozilla.org/get-involved/">
              <h3>We need your help</h3>
              <p>Learn about the ways you can help millions of users get the most out of their favorite browser.</p>
              <p class="go">Join our support team</p>
            </a>

                </div>
            </div>
        </li>
        <li tabindex="0" class="panel" id="panel-webmaker">
             <h2 class="panel-title"><i>Learn</i> the Web</h2>

            <div class="panel-inner">
                <div class="panel-content"> <a rel="external" href="https://webmaker.org">
              <h3>We teach the Web</h3>
             ...

CSS

.form-field-error {
    border-color: #af3232;
    box-shadow: 0 0 0 2px rgba(175,50,50,0.4);
}

.visually-hidden {
    position: absolute!important;
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    padding: 0;
    border: 0;
}

.hidden {
    display: none;
}

.image-replaced {
    text-indent: 120%;
    white-space: nowrap;
    overflow: hidden;
}

.multi-column-clear {
    -webkit-column-width: auto;
    -moz-column-width: auto;
    -o-column-width: auto;
    column-width: auto;
    -webkit-column-count: auto;
    -moz-column-count: auto;
    -o-column-count: auto;
    column-count: auto;
    -webkit-column-gap: normal;
    -moz-column-gap: normal;
    -o-column-gap: normal;
    column-gap: normal;
}

.multi-column-avoid-break {
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    column-break-inside: avoid;
}

#tabzilla:after {
    animation-name: bounce;
    animation-delay: 1s;
    animation-duration: .5s;
    animation-iteration-count: 3;
    animation-timing-function: ease-in-out;
}

@keyframes bounce {
    50% {
        top: 14px;
    }
}

.go:after {
    content: "\00A0\00BB";
    white-space: nowrap;
}

.no-js img.js,.no-js .panel-title {
    display: none;
}

#wrapper,#main-content,.billboard {
    width: 100%;
    padding: 0;
}

#masthead,.container,.newsletter-form {
    width: 960px;
    zoom: 1;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

#masthead:after,.container:after,.newsletter-form:after {
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
    content: ".";
}

.mission,.pillars {
    width: 960px;
}

#colophon {
    margin-top: 0;
}

.mission {
    font-family: 'Open Sans Light',X-LocaleSpecific-Light,'Open Sans',X-LocaleSpecific,sans-serif;
    font-weight: normal;
    line-height: 1.1;
    margin: 0 auto 40px;
    position: relative;
    text-align:...