Create a new version of paste:

<!DOCTYPE html>
<html>
<head>
 
    <!--
   
    >> THEMES OF ROXIE
   
       Fic Rec Page by roxiestheme
       roxiestheme.tumblr.com
       2015-2018 ⓒ All Rights Reserved.
       
    ---
       
    >> TERMS OF USE
   
       Do NOT remove the credit
       Do NOT use as a base code
       Do NOT republish
       Do NOT claim as your own        
             
    ---
   
    >> SPECIAL THANKS
       
       Fonts by Google Fonts
       Icons by FontAwesome (v4.7)
       Isotope by Metafizzy
       style-my-tooltips by Malihu
   
    -->
 	
	<meta charset="utf-8" />
    {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
	
	<title>Fic Recs</title>
	<link rel="shortcut icon" href="{Favicon}" />
    <link rel="alternate" type="application/rss+xml" href="{RSS}" />
	
	<!-- STYLESHEETS -->
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <!-- FONTAWESOME ICONS -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" /> <!-- GOOGLE FONT -->
	
	<style type="text/css">
 
	/*--------------------------------------------------------------*/
	/* BASIC -------------------------------------------------------*/
	/*--------------------------------------------------------------*/

	html, body {
		font-family: 'Open Sans', sans-serif;
		letter-spacing: 0.5px;
		background-image: url('http://static.tumblr.com/a0dmjhi/9dQnnpz7c/tiny_grid.png');
		margin: 0;
		padding: 0;
	}
		
	/* HYPERLINKS */
	a, a:hover, a:active {
		text-decoration: none;
		-webkit-transition: all 0.3s ease-in-out;
		   -moz-transition: all 0.3s ease-in-out;
			 -o-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
	}
		
	/* HEADINGS BASIC */
	h1, h2, h3, h4, h5, h6 {
		margin: 0;
		line-height: 100%;
	}
	
	/* LIST BASIC */
	ul, ol, menu, dir {
		margin: 0;
		padding: 0;
		list-style-type: none;
		-webkit-margin-before: 0;
		-webkit-margin-after : 0;
		-webkit-margin-start : 0;
		-webkit-margin-end   : 0;
		-webkit-padding-start: 0;
	}
		
	/* TOOL TIP */
	#s-m-t-tooltip {
		position: absolute;
		z-index: 9999;
		display: block;
		max-width: 150px;
		margin-top: 5px;
		margin-left: 10px;
		padding: 8px;
		background: #222;
		font-size: 9px;
		color: #eee;
		letter-spacing: 1px;
	}

	/* SCROLL BAR */
	::-webkit-scrollbar-thumb {
		height: 9px;
		background-color: #222;
	}
	::-webkit-scrollbar {
		width: 9px;
		height: 4px;
		background-color: #eee;
	}
		
	/* SELECTION */
	::-moz-selection {
		color: #fff;
		background-color: #222;
	}
	::selection {
		color: #fff;
		background-color: #222;
	}
	
	/* CONTAINER */
	.container {
		width: 900px;
		margin: auto;
	}

	/*--------------------------------------------------------------*/
	/* HEADER ------------------------------------------------------*/
	/*--------------------------------------------------------------*/
	
	/* HEADER BASIC */
	#header {
		width: 100%;
		padding: 50px 0;
		background-color: #222;
	}
	#header .container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#header ul {
		list-style-type: none;	
	}
		
	/* HEADLINE */
	#header h1 {
		font-size: 48px;
		color: #fff;
		font-weight: 700;
		letter-spacing: -2px;
	}
	#header h1:first-letter {
		color: #00ced1;
	}
	#header h2 {
		font-size: 8px;
		color: #fff;
		font-weight: 300;
		text-transform: uppercase;
		letter-spacing: 3px;
	}
	#header h2 span {
		color: #00ced1;
	}
		
	/* LINKS */
	#header .links {
		line-height: 120%;
		text-align: center;
		display: flex;
	}
	#header .links > li + li {
		margin-left: 7px;
	}
	#header .links a {
		display: block;
		border-radius: 50%;
		width: 35px;
		height: 35px;
		line-height: 35px;
		background-color: #fff;
		font-size: 16px;
		color: #222;
	}
	#header .links .fa-home {
		font-size: 20px;
	}
	#header .links a:hover {
		background-color: #00ced1;
	}

	/*--------------------------------------------------------------*/
	/* MAIN --------------------------------------------------------*/
	/*--------------------------------------------------------------*/

	#main {
		margin-top: 50px;
		overflow: hidden;
	}
		
	/* SIDEBAR */
	.sidebar {
		width: 170px;
		float: left;
	}	
	.sidebar .tags {
		padding: 10px;
		background: #fff;
		border: 1px solid #eee;
		margin-bottom: 20px;
	}
	.sidebar .tags h3 {
		background: #222;
		padding: 10px;
		color: #fff;
		text-align: left;
		font-size: 10px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 3px;
		margin-bottom: 5px;
	}
	.sidebar .tags h3:first-letter{
		color: #00ced1;
		font-weight: 700;
	}
	.sidebar .tags ul {
		list-style-type: none;	
	}
	.sidebar .tags ul > li + li {
		border-top: 1px solid #eee;	
	}
	.sidebar .tags button {
		display: block;
		width: 150px;
		padding: 10px 0 10px 10px;
		text-align: left;
		font-size: 8px;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		color: #222;
		outline: none;
		border: none;
		background: transparent;
		cursor: pointer;
		-webkit-transition: all 0.3s ease-in-out;
		   -moz-transition: all 0.3s ease-in-out;
		     -o-transition: all 0.3s ease-in-out;
		    -ms-transition: all 0.3s ease-in-out;
		        transition: all 0.3s ease-in-out;
	}
	.sidebar .tags button:before {
		font-family: 'FontAwesome';
		content: '\f02b';
		padding-right: 10px;
	}
	.sidebar .tags button:hover,
	.sidebar .tags button.is-checked {
		color: #fff;
		background-color: #00ced1;
	}

	/* LIST */
	.list {
		float: right;
		width: 670px;
		margin-bottom: 30px;
	}
	.list .category {
		position: relative;
		width: 128px;
		padding: 15px;
		margin-bottom: 10px;
		background-color: #fff;
		color: #222;
		border: 1px solid #eee;
		float: left;
	}
	.list .category .title {
		font-size: 11px;
		font-weight: 600;
	}
	.list .category .title a {
		color: #222;
	}
	.list .category .title a:hover {
		color: #00ced1;
	}
	.list .category .author {
		display: block;
		font-size: 8px;
		font-style: italic;
		letter-spacing: 1px;
		font-weight: 400;
		margin: 3px 0 0;
		color: #00ced1;
	}
	.list .category .author:before{
		content:'by ';
	}
	.list .category .desc {
		display: block;
		font-size: 7px;
		letter-spacing: 1px;
		font-weight: 300;
		margin: 2px 0 0;
		color: #aaa;
		text-transform: uppercase;
	}
	.list .category ul {
		list-style-type: none;
		margin-top: 10px;
		font-size: 8px;
		font-weight: 400;
		color: #aaa;
	}
	.list .category ul > li + li {
		margin-top: 5px;
	}
	.list .category ul > li:before {
		color: #00ced1;
		text-transform: uppercase;
		letter-spacing: 1px;	
	}
	.category .words{
		line-height: 100%;
	}
	.category .words:before{
		content: 'words: ';
	}
	.category .summary:before{
		content:'summary: ';
	}
	</style>

</head>
<body>	
	<header id="header">
		<nav class="container">
			<ul class="headline">
				<li><h1>fic recs</h1></li>
				<li><h2>list by <span>{name}</span></h2></li>
				<!-- This will automatically generate your username,
				no need to edit unless you want to customize it
				(it may not be displayed in the preview)-->
			</ul>
			<ul class="links">
				<li><a href="/" class="fa fa-home" title="home"></a></li>
				<li><a href="/ask" class="fa fa-envelope" title="mail"></a></li>
				<li><a href="/" class="fa fa-heart" title="bookmark"></a></li>
				<!-- !!! DO NO REMOVE THE CREDIT !!! -->
				<li><a href="http://roxiestheme.tumblr.com" target="_blank" class="fa fa-copyright" title="credit"></a></li>
			</ul>
		</nav>
	</header>	
	<main id="main" class="container">		
		<div class="sidebar filters">
			<!-- start of a group -->
			<div class="tags button-group" data-filter-group="group-name">
				<h3>Overview</h3>
				<ul>
					<li><button class="button is-checked" data-filter="">show all</button></li>
					<li><button class="button" data-filter=".tag1">tag name</button></li>
					<li><button class="button" data-filter=".tag2">tag name</button></li>
				</ul>
			</div>
			<!-- end of a group -->
			<!-- start of a group -->
			<div class="tags button-group" data-filter-group="group-name">
				<h3>Overview</h3>
				<ul>
					<li><button class="button is-checked" data-filter="">show all</button></li>
					<li><button class="button" data-filter=".tag3">tag name</button></li>
					<li><button class="button" data-filter=".tag4">tag name</button></li>
				</ul>
			</div>
			<!-- end of a group -->
		</div><!-- //sidebar -->		
		<div class="list">		
			<!-- start of a category -->
			<div class="category tag1 tag3"><!-- add your tags here-->
				<h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
				<span class="author">username</span>
				<span class="desc">pairing / rating</span>
				<ul>
					<li class="words">word count</li>
					<li class="summary">summary</li>
				</ul>
			</div>
			<!-- end of a category -->
			<!-- start of a category -->
			<div class="category tag2 tag4"><!-- add your tags here-->
				<h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
				<span class="author">username</span>
				<span class="desc">pairing / rating</span>
				<ul>
					<li class="words">word count</li>
					<li class="summary">summary</li>
				</ul>
			</div>
			<!-- end of a category -->
		</div><!-- //list-->		
	</main>
	<!-- SCRIPTS -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><!-- JQUERY -->
	<script src="https://static.tumblr.com/ickcbh2/sFepe3zg2/isotope.pkgd.min.js"></script><!-- ISOTOPE BY METAFIZZY -->
	<script src="https://static.tumblr.com/a0dmjhi/hpUpe5tj0/jquery.style-my-tooltips.min.js"></script><!-- STYLE-MY-TOOLTOPS BY MALIHU -->
	<script type="text/javascript">
	(function($) {
		$(window).on('load', function() {
			// init Isotope
			var $grid = $('.list').isotope({
				itemSelector: '.category',
				masonry: {
					columnWidth: 160,
					gutter: 10
				}
			});
			// store filter for each group
			var filters = {};

			$('.filters').on('click', '.button', function(event) {
				var $button = $( event.currentTarget );
				// get group key
				var $buttonGroup = $button.parents('.button-group');
				var filterGroup = $buttonGroup.attr('data-filter-group');
				// set filter for group
				filters[ filterGroup ] = $button.attr('data-filter');
				// combine filters
				var filterValue = concatValues( filters );
				// set filter for Isotope
				$grid.isotope({ filter: filterValue });
			});

			// change is-checked class on buttons
			$('.button-group').each(function(i, buttonGroup) {
				var $buttonGroup = $(buttonGroup);
				$buttonGroup.on('click', 'button', function(event) {
					$buttonGroup.find('.is-checked').removeClass('is-checked');
					var $button = $(event.currentTarget);
					$button.addClass('is-checked');
				});
			});

			// flatten object by concatting values
			function concatValues( obj ) {
				var value = '';
				for ( var prop in obj ) {
					value += obj[ prop ];
				}
				return value;
			}
		});
		// tooltips
		$(document).ready(function(){
			$("[title]").style_my_tooltips({
				tip_follows_cursor: true,
				tip_delay_time: 200,
				tip_fade_speed: 300
			});
        });
	}(jQuery));
	</script>
</body>
</html>