JSFiddle - React, Tailwind, and code Playground

by Vladimir Novitsky

HTML

<script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
		<header id="page-header">
			<h2 id="blog-title"><a class="unvisited" href="/" title="@site">@site</a></h2>

			<div class="nav-icon"><span><span class="invisible">Меню</span></span></div>

			<nav id="blog-nav">
				<ul>
					<li><a class="unvisited" href="#">Пункт 1</a></li>
					<li><a class="unvisited" href="#">Пункт 2</a></li>
					<li><a class="unvisited" href="#">Пункт 3</a></li>
				</ul>
			</nav>
		</header>

		<main role="main" id="content">
			<article class="post">
				<header class="post-header">
					<h2 class="post-title"><a class="post-link" href="#">Password interface hell</a></h2>
				</header>

				<section class="post-content">
<p>I&rsquo;m using a&nbsp;password manager. I&nbsp;dislike password managers. They solve a&nbsp;problem that shouldn&rsquo;t exist in&nbsp;the first place. They solve a&nbsp;problem software creates. I&nbsp;shouldn&rsquo;t have to&nbsp;care about passwords.</p>

<p>Nonetheless, we&nbsp;all have an&nbsp;insane amount of&nbsp;passwords to&nbsp;remember and fill out. In&nbsp;the end most people just use the same password for every service, or&nbsp;write them down in&nbsp;a&nbsp;file on&nbsp;their computer. Unsecure but totally understandable, they&rsquo;re just trying to&nbsp;clean up&nbsp;the mess we&nbsp;leave behind.</p>

<p>I&nbsp;was excited when Apple first introduced Touch ID. I&nbsp;thought fingerprint recognition was going to&nbsp;appear everywhere and finally kill login screens and passwords. It&nbsp;hasn&rsquo;t happened, yet.</p>

<p>I&rsquo;ve seen a&nbsp;few apps try to&nbsp;solve authentication with interesting flows: emailing a&nbsp;secret login link, texting users... There was OpenID, browser plugins and native browser functionality. Somehow it&nbsp;never really picked&nbsp;up.</p>
				</section>
			</article>

			<article class="post">
				<header class="post-header">
					<h2 class="post-title"><a class="post-link" href="#">Responsive...

CSS

@import url('https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic&subset=latin,cyrillic-ext');
@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic&subset=latin,cyrillic-ext');

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext);

/* Default */
html {
	font-size:20px;
	}
body {
	font-family:'PT Serif', 'Times New Roman', 'Times CY', 'Nimbus Roman No9 L', serif;
	font-weight:400;
	line-height:1.5;

	height:100%;
	margin:0;
	padding:0;

	color:#333;
	background-color:white;

	shape-rendering:geometricPrecision;
	text-rendering:geometricPrecision;
	image-rendering:optimizeQuality;

	-webkit-font-feature-settings:'kern' 1, 'liga' 1, 'swsh' 1;
			font-feature-settings:'kern' 1, 'liga' 1, 'swsh' 1;
	}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
	display:block;
	}

p {
	margin-bottom:1.3em;
	padding:0;
	}

a,
a.unvisited,
a.unvisited:visited {
	color:steelblue;
	outline:none;
	text-decoration:none;
	border-bottom:.05rem solid rgba(70,130,180,.2);

	transition:.15s;
	}
a:hover,
a.unvisited:hover,
a.unvisited:visited:hover {
	color:crimson;
	border-color:rgba(220,20,60,.2);
	}
a:active,
a.unvisited:active,
a.unvisited:visited:active {
	color:crimson;
	border-color:crimson;
	}
a:visited,
a:visited:hover,
a:visited:active {
	color:darkmagenta;
	border-color:rgba(139,0,139,.2);
	}
a:visited:active {
	border-color:darkmagenta;
	}

h1, h2, h3, h4, h5 {
	font:2.441rem/1.2 'Open Sans Condensed', Arial, 'Helvetica CY', 'Nimbus Sans L', sans-serif;
	font-weight:700;

	margin:1.414em 0 .3em;
	}
h1 {
	margin-top:0;
	}
h2 {
	font-size:1.953rem;
	}
h3 {
	font-size:1.563rem;
	}
h4 {
	font-size:1.25rem;
	}
h5 {
	font-size:1rem;
	}

small {
	font-size:.8rem;
	}

strong, b {
	font-weight:inherit;
	}
strong, b {
	font-weight:bolder;
	}

ul, ol {
	font-size:.9rem;

	margin-top:.5rem;

	list-style:disc;
	}
ol...

JavaScript

$('.nav-icon').click(function() {
	$('body').toggleClass('nav-active');
});
$('body').on({
	'mousewheel': function(e) {
		if ($('body').hasClass('nav-active')) {
			e.preventDefault();
			e.stopPropagation();
		}
	}
})