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 -...