JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<template>
  <div>
    <BountyWinnerModal />
    <TheOverlay :show-overlay="modalOpen" @closeoverlay="darkenSidebar(false); closeModal()" @changeOverlay="setModal($event)" @letMeIn="openModal('signIn')" @welcomeOffer="openModal('deposit')" v-if="currentLocation !== 'Cashier Mobile'">
      <template v-slot="{ setBiggerOverlay }">
        <SignIn v-if="modalOpen === 'signIn'" />
        <SignUp v-if="modalOpen === 'signUp'" />
        <Welcomeoffer v-if="modalOpen === 'firstTimeOffer'" />
        <LogOut v-if="modalOpen === 'logOut'" />
        <withdraw v-if="modalOpen === 'withdraw'" />
        <deposit v-if="modalOpen === 'deposit'" />
        <cashier v-if="modalOpen === 'cashier'" :setBiggerOverlay="setBiggerOverlay" />
        <credit-selector v-if="modalOpen === 'bountySidebar'" />
        <credit-confirmation v-if="modalOpen === 'creditConfirmation'" />
        <claim-cashback-jackpot-sidebar v-if="modalOpen === 'cashbackSidebar'" />
        <switch-bounty-sidebar v-if="modalOpen === 'switchBountySidebar'" />
        <JackpotClaimSidebar v-if="modalOpen === 'jackpotClaim'" />
        <MessagesSidebar v-if="modalOpen === 'messages'" />
      </template>
    </TheOverlay>

    <div class="sidebar-background"></div>
    <aside class="sidebar" :class="{'darken' : darkSidebar}">
      <a href="/" class="logo sidebar__logo">
        <span>Spin</span>
        Bounty
      </a>
      <button type="button" class="btn-close sidebar__close-btn hide-desktop" @click="closeSidebar()"><i class="icon-close"></i></button>
      <div class="divider sidebar__divider hide-mobile"></div>
      <div class="sidebar__actions hide-mobile">
        <div class="sidebar__balance" v-if="authState">{{ balance | moneyFilter }}</div>
        <button :class="{withdrawOpened : modalOpen == 'withdraw' , active : modalOpen == 'deposit'}" class="depositBtn btn btn-md btn-text-md btn-secondary btn-block sidebar__action toggle-overlay btn-overlay" v-if="authState" @click="darkenSidebar(true);...