JSFiddle - React, Tailwind, and code Playground
by luka kupunia
HTML
<template>
<div id="k-burger">
<div id="close-k" @click="close()">
<span>Close</span>
<i class="wiz wiz-close"></i>
</div>
<div class="nav">
<div class="menu-item">
<a href class="active">Seasons</a>
</div>
<div class="menu-item">
<a href>Ratings</a>
</div>
<div class="menu-item">
<a href>Ratings</a>
</div>
<div class="menu-item">
<a href>Ratings</a>
</div>
<div class="menu-item">
<a href>Ratings</a>
</div>
<div class="stick"></div>
<div class="lang-bar">
<div class="k-circle">
<button class="circle-button circle-button--golden d-block position-relative border-0">
<span class="circle-button__content position-absolute">
<div class="text-white text-center font-semibold">
<span class="d-block text-h4">Geo</span>
</div>
</span>
</button>
</div>
<div class="k-circle">
<button class="circle-button circle-button--golden d-block position-relative border-0 not-active">
<span class="circle-button__content position-absolute">
<div class="text-white text-center font-semibold">
<span class="d-block text-h4">Eng</span>
</div>
</span>
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
close() {
this.$emit('close');
},
},
};
</script>
<style>
#k-burger {
width:...