JSFiddle - React, Tailwind, and code Playground

by Bart Infinity

HTML

<div id="S8l2560g">

				<div id="RHN7826g">

					<div id="T7056O1u" class="n30v279f0rh7" style="position: absolute; right: 5px; top: 5px; z-index: 1"><div class="ln65hhp05n5w"></div></div>

					<div>
						<div>
							<p style="margin: 5px;">Wyszukiwarka wyświetla tylko 10 postów, które najbardziej odpowiadają kryteriom wyszukiwania.</p>
							<p style="margin: 5px;">Czy chcesz przejść do listy tagów z takim samym zapytaniem?</p>
						</div>
						<div style="display: flex;">
							<div>
								<div class="J8b4V9VQ ixfr6f11dt">
									Tak
								</div>
							</div>
							<div style="display: flex;">
								<div class="N8e33bLY ixfr6f11dt">
									Nie
								</div>
								<div style="padding: 12px 0px;"><div>
									<input type="checkbox" style="vertical-align: middle;"/> <span>Nie pytaj więcej...</span>
								</div></div>
							</div>
						</div>
					</div>

				</div>

			</div>


<div id="k5ORgvNM">
    Test - is checked: <span style="font-weight: bold;">first check someone...</span>
</div>

CSS

.n30v279f0rh7 {
	background: rgba(0,0,0,0.3);
	color: white;
	font-weight: bold;
	width: 17px;
	height: 17px;
	padding: 0px;
	text-align: center;
	border-radius: 30px;
	cursor: pointer;
	font-size: 8px;
	font-family: arial;
	display: inline-block;
}

.n30v279f0rh7:hover {
	background: rgba(0,0,0,0.5);
}

.ln65hhp05n5w {
	margin: auto;
	width: 17px;
	height: 18px;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAAEx0v4+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzA5QTM4QUI4RjFGMTFFMkI1QjhEMzZDOEI0NENBNDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzA5QTM4QUM4RjFGMTFFMkI1QjhEMzZDOEI0NENBNDkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMDlBMzhBOThGMUYxMUUyQjVCOEQzNkM4QjQ0Q0E0OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMDlBMzhBQThGMUYxMUUyQjVCOEQzNkM4QjQ0Q0E0OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlSKYXwAAAC8SURBVHjaYvz//z8DDDBB6f/IHEYQARBAjDBlcCVwaYAAYkQ2Ad0kmGlgFSxIgowwBkAAEdSOKnj27Fm4eRDTgdqB+P+ZM2f+Q9kMxJsJEEBYVeK0HAdAMYEFjwJGQiaCFDBCvUi6GwECiCqeoY7C/6SYCI5QYnxNVDiCTMLuDFjyAGHk5IKOBzAcAQKMaKtHhoH/sZQY2MSIDmxGtMTxH1qm4DSMGC/jkmQkOTnAMgGSi+AuRs8gIzzZAACeB5OmAD1/PAAAAABJRU5ErkJggg==');
	background-size: contain;
}

.ixfr6f11dt { /* Buttony wykorzystywane na stronie, np. skrypt do ladowania stron,...

JavaScript

$('#S8l2560g').show();

	$('#S8l2560g').find('input').css('cursor', 'pointer').parent().css('cursor', 'pointer').toggle(function() {
		//setCookie('Search information','hidden',168);
        $('#k5ORgvNM span').text('yes, is checked').css('color', 'red');
		$(this).find('input').attr('checked', true);
	}, function() {
		//setCookie('Search information','visible',168);
        $('#k5ORgvNM span').text('no, is nonchecked').css('color', 'blue');
		$(this).find('input').attr('checked', false);
	});

	$('#S8l2560g #RHN7826g .J8b4V9VQ').click(function() {
		/*
        var VCz24Tp2 = pathname;
		VCz24Tp2 = VCz24Tp2.replace('/search/', '/tagged/');
		window.location.href = VCz24Tp2;
        */
        alert('redirection');
	})

	$('#S8l2560g #RHN7826g .N8e33bLY').click(function() {
		$('#S8l2560g').fadeOut();
	})
	
	$('#S8l2560g #RHN7826g #T7056O1u').click(function() {
		$('#S8l2560g').fadeOut();
	});