JSFiddle - React, Tailwind, and code Playground

by gnemeth

HTML

<link rel="stylesheet" href="https://www.telekom.sk/documents/10179/663135/style.css">
<div id="content">
<div class="table table-1">
            <table>
                <tbody>
                    <tr>
                        <th class="text-left">
                            Zóny/krajiny</th>
                        <th class="text-center" colspan="2">
                            Hovory</th>
                        <th class="text-center">
                            SMS</th>
                        <th class="text-center">
                            MMS</th>
                    </tr>
                    <tr class="subHead">
                        <td>
                            &nbsp;</td>
                        <td>
                            Odchádzajúce</td>
                        <td>
                            Prichádzajúce</td>
                        <td>
                            Odchádzajúce</td>
                        <td>
                            Odchádzajúce</td>
                    </tr>
                    <tr>
                        <td class="text-left">
                            Zóna 1: EÚ + Island, Nórsko, Lichtenštajnsko a Švajčiarsko</td>
                        <td>
                            0,13 €</td>
                        <td>
                            0,06 €</td>
                        <td>
                            0,06 €</td>
                        <td>
                            0,39 €</td>
                    </tr>
                    <tr>
                        <td class="text-left">
                            Zóna 2: Dovolenkové krajiny a iné</td>
                        <td>
                            1 €</td>
                        <td>
                            1 €</td>
                        <td>
                            0,39 €</td>
                        <td>
                            0,39 €</td>
                    </tr>
                    <tr>
                        <td...

CSS

/* =============== IMPORTS  =============== */
/* =============== GLOBAL IMPORTS  =============== */
/* =============== BASE IMPORTS  =============== */
/* =============== RESET PORTAL STYLES =============== */
#wrapper #content { padding-bottom: 0; }

#wrapper .portlet-column-content { padding: 0; }

#content h1, #content h2, #content h3 { text-decoration: none; border: 0; }

#content a { text-decoration: none; }

#content p { font-size: 16px; }

#content ul { list-style: none; }

#wrapper .wbreadcrumbs { display: none; }

#content, #content * { box-sizing: border-box; }

#content .portlet-content { padding: 0; }

/* =============== GLOBAL CONFIG  =============== */
/* =============== UTILITIES  =============== */
/* =============== FUNCTIONS & MIXINS =============== */
/* =============== CSS FOR STICKY NAV =============== */
.text_centered { text-align: center; }

.text_left { text-align: left; }

.text_uc { text-transform: uppercase; }

.text_initial { text-transform: initial; }

#wrapper .text__link { font-size: 18px; }

#wrapper .font_magenta { color: #e20074; }

#wrapper .font_black { color: #000; }

#wrapper .font_white { color: #fff; }

#wrapper .font_mine-shaft { color: #262626; }

#wrapper .font_deep-cerulean { color: #007faf; }

/* =============== SPACING =============== */
#wrapper .margin_top20 { margin-top: 20px; }

#wrapper .margin_top50 { margin-top: 50px; }

#wrapper .margin_bottom20 { margin-bottom: 20px; }

#wrapper .mid__icon { vertical-align: middle; }

/* =============== BASE IMPORTS  =============== */
/* =============== BUTTONS =============== */
#wrapper .button { color: #fff; font-size: 16px; padding: 0 17px; }

#wrapper .button_font-black { color: #000; }

#wrapper .button_cream-can { background-color: #f2c957; border: 1px solid #f2c957; }

#wrapper .button_lima { background-color: #6bb324; border: 1px solid #6bb324; }

/* =============== CSS FOR STICKY NAV =============== */
#nav-sticky ul { list-style-type: none; width: 940px; margin:...