JSFiddle - React, Tailwind, and code Playground

by MaXX

HTML

<div style="width: 100%; height:60px;margin:5px; background: #2E2E2E;"></div>
<div style=""> <!-- отсюда -->
    
    
    <div class="toggle">
        <span class="price_button" href="#">BUY</span>
        <div class="mbuy_panel"> <!-- content -->
            
                <div class="license-box">
                    <div>Standart</div>
                    <div>9
                        <sup style="top:-0.8em;font-size:12px;">99</sup>$
                    </div>
                    <div class="discount-icon">-25%</div>
                </div>
                <div class="license-box">
                    <div>Premium</div>
                    <div>24
                        <sup style="top:-0.8em;font-size:12px;">99</sup>$
                    </div>
                    <div class="discount-icon">-25%</div>
                </div>
                <div class="license-box">
                    <div>Exclusive</div>
                    <div>79
                        <sup style="top:-0.8em;font-size:12px;">99</sup>$
                    </div>
                    <div class="discount-icon">-25%</div>
                
            </div>
        </div>
    </div>
    <div style="clear: left"></div>

<!--  ---------------------------------------  -->
    
    <div style="width: 100%; height:60px;margin:5px; background: #2E2E2E;"></div>
<div style=""> <!-- отсюда -->
    
    
    <div class="toggle">
        <span class="price_button" href="#">BUY</span>
        <div class="mbuy_panel"> <!-- content -->
            
                <div class="license-box">
                    <div>Standart</div>
                    <div>9
                        <sup style="top:-0.8em;font-size:12px;">99</sup>$
                    </div>
                    <div class="discount-icon">-25%</div>
                </div>
                <div class="license-box">
                    <div>Premium</div>
                    <div>24
                        <sup...

CSS

.toggle {
 position: relative;
    transition:0.3s;
}
.mbuy_panel{
    transition:0.3s;
}
.price_button {
    width: 116px;
    text-align: center;
    font-size: 1em;
    padding: 2px;
    position: absolute;
    left: 10px;
    top: -40px;
    z-index: 100;
    background: #fff!important;
    border: 1px solid red;
    cursor: pointer;
    color: red;
    font-weight: bold;
    transition:0.3s;
}
.price_button:before {
    content: "";
}
.download_button {
    width: 116px;
    text-align: center;
    font-size: 1em;
    padding: 2px;
    position: absolute;
    left: 10px;
    top: -40px;
    z-index: 100;
    background: #fff!important;
    border: 1px solid red;
    cursor: pointer;
    color: red;
    font-weight: bold;
}
.download_button:before {
    content: "";
}

.license-box {
    width: 140px;
    float: left;
    margin-left: 3px;
    margin-bottom: 2px;
    text-align: center;
    color: #fff;
    font-size: 1.4em;
    height: 50px;
    margin-top: 10px;
    background: #2E2E2E;
    border: 2px solid #47494a;
    cursor: pointer;
    position: relative;
    z-index: 99;
}
    
.discount-icon {
    font-size: 0.5em;
    font-weight: bold; 
    padding: 3px;
    position: absolute;
    right: -5px;
    bottom: -10px;
    z-index: 100;
    color: green !important;
    background: #fff !important;
    border: 1px solid green;
    border-radius: 50%;        
}
        
.discount-icon:before {
    content: "";      
}

JavaScript

// Набор функций
var base = {
	// Поиск элементов по классу
	findClass: function(str, node) {
		 if(document.getElementsByClassName) return (node || document).getElementsByClassName(str);
		 else {
			  var node = node || document, list = node.getElementsByTagName('*'), length = list.length, Class = str.split(/\s+/), classes = Class.length, array = [], i, j, key;
			  for(i = 0; i < length; i++) {
					key = true;
					for(j = 0; j < classes; j++) if(list[i].className.search('\\b' + Class[j] + '\\b') == -1) key = false;
					if(key) array.push(list[i]);
			  }
			  return array;
		 }
	},
	// Добавление обработчиков событий
	bind: function(node, type, listener) {
		if(node.addEventListener) node.addEventListener(type, listener, false);
	
	},
	// Реализация DOMContentLoaded
	init: [],
	ready: function() {
		if(!arguments.callee.done) {
			arguments.callee.done = true;
			if(this.timer) clearInterval(this.timer);
			var i, length = this.init.length;
			for(i = 0; i < length; i++) this.init[i]();
			this.init = [];
		}
	},
	check: function() {
		var _this = this, listener = function() {
			_this.ready();
		};
		if(document.addEventListener) document.addEventListener('DOMContentLoaded', listener, false);
		if(/KHTML|WebKit/i.test(navigator.userAgent)) this.timer = setInterval(function() {
			if(/loaded|complete/.test(document.readyState)) base.ready();
		}, 10);
        
		this.bind(window, 'load', listener);
	}
};

// Функции для работы с панельками
var price_button = {
	process: function() {
		var i, list = base.findClass('price_button'), length = list.length;
		for(i = 0; i < length; i++) base.bind(list[i], 'click', this.toggle);
		list = base.findClass('mbuy_panel');
		length = list.length;
		for(i = 0; i < length; i++) list[i].style.display = 'none';
	},
	toggle: function() {
		var mbuy_panel = base.findClass('mbuy_panel', this.parentNode)[0], e = arguments[0] || window.event;
		if(mbuy_panel.style.display == 'block') {
			mbuy_panel.style.display =...