JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<div class="table-wrapper">
            <table
                    class="w-full table-auto border-collapse bg-eb-dark p-8 border border-gray-800 p-4 mx-auto mb-8 mt-6"
            >
                <caption>
                    <strong> Subscriptions </strong>
                </caption>
                <thead>
                <tr class="px-4 py-2 text-left border border-gray-800">
                    <th class="px-4 py-2 text-left border border-gray-800">
                        <strong class="font-x-large">EuroBytes</strong>
                        <span
                                class="border-bottom-dashed"
                                data-title="The EuroBytes Application Platform features"
                        >
              <i class="fa-solid fa-question"></i>
            </span>
                    </th>
                    <th class="px-4 py-2 text-left border border-gray-800">Basic</th>
                    <th class="px-4 py-2 text-left border border-gray-800">
                        <strong class="font-xx-large"> Standard </strong><br />
                        <small class="background-color-green"> most picked </small>
                    </th>
                    <th class="px-4 py-2 text-left border border-gray-800">Plus</th>
                    <th class="px-4 py-2 text-left border border-gray-800">Enterprise</th>
                </tr>
                </thead>
                <tbody>
                <tr class="px-4 py-2 text-left border border-gray-800">
                    <td>
                        Hardware
                        <span
                                class="border-bottom-dashed"
                                data-title="The hardware levels are upgradable"
                        >
              <i class="fa-solid fa-question"></i>
            </span>
                    </td>
                    <td>
                        <a
                               ...

CSS

/*

Custom

*/

:root {
    --text-color: rgb(188, 183, 174);
    --background-color: rgb(27, 30, 31);
    --border-color: rgb(62, 68, 70);
    --border-focus-color: rgb(62, 68, 70);


    --object-background-color: rgb(34, 36, 38);

    --nav-menu-color: rgb(205, 200, 194) !important;
    --nav-menu-background-color: rgb(108, 13, 6) !important;

    --box-shadow: rgba(0, 0, 0, 0.75);

    --section-background-color: rgb(24, 26, 27);

    --link-color: rgb(118, 167, 212);

    --color-red: #8B0000FF;

    --color-green: #006400FF;

}




/*.footer-links, .footer-links ul, .footer-links ul li {*/
/*    !*width: 50%;*!*/
/*    !*max-width: 50%;*!*/
/*    !*min-width: 25%;*!*/
/*}*/

/*// style="float: right;" */

.app-favicon {
    width: 25%;
    border-radius: 5% !important;
}

.grayscale {
    filter: grayscale(100%);
}


/*
    Figure
*/

/*figure {*/
/*    text-align: center;*/
/*}*/

/*figure figcaption {*/
/*    text-align: center;*/
/*    font-size: 12px;*/
/*}*/

figure figcaption ul.links {
    list-style-type: none;
}

figure figcaption ul.links li {
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
    border-right: 1px solid var(--border-color);
}

figure figcaption ul.links li img {
    width: 30px !important;
    vertical-align: middle;
    height: 30px;
}

#app-favicon {
    background: var(--object-background-color);
    border-bottom: 1px solid var(--border-color);
    padding: 2px 3px;
}

.app-favicon {
    width: 45px !important;
}

figure img {
    margin-left: 10% !important;
    width: 75%;
    max-width: 100%;
    min-width: 50%;
    border: 1px solid var(--border-color);
}

figure.customer-box img {
    width: 25%;
    max-width: 75%;
    min-width: 25%;
}

#eurobytes-logo {
    /*max-width: 500px;*/
    /*width: 250px;*/
    /*min-width: 150px;*/

    /*max-width: 50%;*/
    /*width: 25%;*/
   ...

JavaScript

(()=>{var qv=Object.create;var Hi=Object.defineProperty;var $v=Object.getOwnPropertyDescriptor;var Lv=Object.getOwnPropertyNames;var Mv=Object.getPrototypeOf,Nv=Object.prototype.hasOwnProperty;var df=r=>Hi(r,"__esModule",{value:!0});var hf=r=>{if(typeof require!="undefined")return require(r);throw new Error('Dynamic require of "'+r+'" is not supported')};var P=(r,e)=>()=>(r&&(e=r(r=0)),e);var x=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),Ge=(r,e)=>{df(r);for(var t in e)Hi(r,t,{get:e[t],enumerable:!0})},Bv=(r,e,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of Lv(e))!Nv.call(r,i)&&i!=="default"&&Hi(r,i,{get:()=>e[i],enumerable:!(t=$v(e,i))||t.enumerable});return r},pe=r=>Bv(df(Hi(r!=null?qv(Mv(r)):{},"default",r&&r.__esModule&&"default"in r?{get:()=>r.default,enumerable:!0}:{value:r,enumerable:!0})),r);var m,u=P(()=>{m={platform:"",env:{},versions:{node:"14.17.6"}}});var Fv,be,ft=P(()=>{u();Fv=0,be={readFileSync:r=>self[r]||"",statSync:()=>({mtimeMs:Fv++}),promises:{readFile:r=>Promise.resolve(self[r]||"")}}});var Fs=x((oP,gf)=>{u();"use strict";var mf=class{constructor(e={}){if(!(e.maxSize&&e.maxSize>0))throw new TypeError("`maxSize` must be a number greater than 0");if(typeof e.maxAge=="number"&&e.maxAge===0)throw new TypeError("`maxAge` must be a number greater than 0");this.maxSize=e.maxSize,this.maxAge=e.maxAge||1/0,this.onEviction=e.onEviction,this.cache=new Map,this.oldCache=new Map,this._size=0}_emitEvictions(e){if(typeof this.onEviction=="function")for(let[t,i]of e)this.onEviction(t,i.value)}_deleteIfExpired(e,t){return typeof t.expiry=="number"&&t.expiry<=Date.now()?(typeof this.onEviction=="function"&&this.onEviction(e,t.value),this.delete(e)):!1}_getOrDeleteIfExpired(e,t){if(this._deleteIfExpired(e,t)===!1)return t.value}_getItemValue(e,t){return t.expiry?this._getOrDeleteIfExpired(e,t):t.value}_peek(e,t){let i=t.get(e);return...