Best Friends

<style>
	/* Best Friends by Memoria at The Initiative.
	   Last updated 07.24.18.
	   Please do not remove credits! */
	   
	/* Best Friends - Overall Styles */
	.bstfrnds {
		max-width: 700px; /* max template width */
		width: auto;
		margin: 0 auto;
		font-family: 'Trebuchet MS', arial, sans-serif; /* font family */
		font-size: 13px;
		line-height: 1.7;
		color: #f5f5f5; /* font color */
		border: 1px solid #383c46; /*background color */
		background: #383c46; /*background color */
	}
	.bstfrnds, .bstfrnds * {
		box-sizing: border-box;
	}
	.bstfrnds h3, .bstfrnds h4 {
		font-family: georgia, garamond, times new roman, serif;
		font-style: italic;
		font-weight: normal;
	}
	.bstfrnds h3, .bstfrnds h4, .bstfrnds p, .bstfrnds ul {
		margin: 0 0 20px 0;
	}
	.bstfrnds a {
		color: #a4adc5; /*link color */
		text-decoration: none;
	}
	.bstfrnds a:hover {
		color: #f5f5f5; /*link hover color */
	}
	
	/* Best Friends - Header */
	.bstfrnds .bstfrnds-header {
		position: relative;
		line-height: 0;
	}
	.bstfrnds .bstfrnds-header img {
		max-width: 100%;
		width: auto;
	}
	.bstfrnds .bstfrnds-header h3 {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.5); /*header background color - keep rgba for transparency */
		margin: 0;
		padding: 20px;
		color: #383c46; /*header font color */
		font-size: 20px;
		line-height: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	/* Best Friends - Tabs */
	.hc-tabs-wrapper .hc-tabs-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.hc-tabs-wrapper .hc-tabs-list:before, .hc-tabs-wrapper .hc-tabs-list:after {
		content: '';
		display: table;
		zoom: 1;
	}
	.hc-tabs-wrapper .hc-tabs-list:after {
		clear: both;
	}
	.hc-tabs-wrapper .hc-tabs-list li {
		float: left;
		width: 25%; /*Width = 100 / Number of tabs */
	}
	.hc-tabs-wrapper .hc-tabs-list li span {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		background: #50634e;
		border-right: 1px solid #485946;
		color: #f5f5f5;
		cursor: pointer;
		padding: 5px 20px;
		text-align: center;
	}
	.hc-tabs-wrapper .hc-tabs-list li.hc-tab-active span {
		background: #383c46;
		border-right-color: #32363f;
	}
	.hc-tabs-wrapper .hc-tabs-list li:last-child span {
		border-right-color: transparent;
	}
	.hc-tabs-wrapper .hc-content-block {
		position: absolute;
		top: -9999px;
		left: -9999px;
		z-index: -1;
		opacity: 0;
		visibility: hidden;
		-webkit-transition: opacity 0.5s ease;
		transition: opacity 0.5s ease;
		padding: 20px;
	}
	.hc-tabs-wrapper .hc-content-block > *:last-child {
		margin-bottom: 0;
	}
	.hc-tabs-wrapper .hc-content-block h4 {
		font-size: 16px;
	}
	.hc-tabs-wrapper .hc-content-block.hc-tab-show {
		position: static;
		visibility: visible;
		opacity: 1;
	}
	
	/* Best Friends - Responsive */
	@media only screen and (max-width: 540px) {
		.bstfrnds .bstfrnds-header h3 {
			font-size: 17px;
		}
		.hc-tabs-wrapper .hc-tabs-list li {
			width: auto;
			float: none;
		}
		.hc-tabs-wrapper .hc-tabs-list li span {
			text-align: left;
			border-bottom: 1px solid #485946;
		}
		.hc-tabs-wrapper .hc-tabs-list li.hc-tab-active span {
			border-bottom-color: #32363f;
		}
		.hc-tabs-wrapper .hc-tabs-list li span,	.hc-tabs-wrapper .hc-tabs-list li.hc-tab-active {
			border-right: 0;
		}
		.hc-tabs-wrapper .hc-content-block h4 {
			font-size: 15px;
		}
	}
</style>
<div class="bstfrnds">
	<div class="bstfrnds-header">
		<img src="//images.rpginitiative.com/uploads/monthly_2018_08/large.bstfrnds-banner.jpg.b5fb9b34bbcfdcc684a507a74802f425.jpg" />
		<h3>Here is a title</h3>
	</div>
	<div class="hc-tabs-wrapper">
		<div class="hc-tabs">
			<ul class="hc-tabs-list">
				<li class="hc-tab-active">
					<span data-tab="hc-tab01">Tab 01</span>
				</li>
				<li>
					<span data-tab="hc-tab02">Tab 02</span>
				</li>
				<li>
					<span data-tab="hc-tab03">Tab 03</span>
				</li>
				<li>
					<span data-tab="hc-tab04">Tab 04</span>
				</li>
			</ul>
		</div>
		<div class="hc-tab-content">
			<div class="hc-content-block hc-tab01 hc-tab-show">
				<h4>This Is Tab 01 Content</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium, fugiat pariatur, saepe tenetur accusantium ut voluptates neque hic dolorum! <a href="//google.com">Placeat</a> unde qui cupiditate numquam aliquid, id illo. Quibusdam, ducimus.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae illum dicta quidem laudantium sed voluptas ipsam repudiandae corporis veritatis, nostrum fugit harum, nihil dolorem saepe perferendis <a href="//google.com">cumque</a> temporibus eum. Atque.</p>
			</div>
			<div class="hc-content-block hc-tab02">
				<h4>This Is Tab 02 Content!</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium, fugiat pariatur, saepe tenetur accusantium ut voluptates neque hic dolorum! Placeat unde qui cupiditate numquam aliquid, id illo. Quibusdam, ducimus.</p>
				<ul>
					<li>List item 01</li>
					<li>List item 02</li>
					<li>List item 03</li>
				</ul>
			</div>
			<div class="hc-content-block hc-tab03">
				<h4>This Is Tab 03 Content!</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ipsa distinctio id, neque repellendus quod corrupti voluptas rerum accusantium minus molestiae. Deserunt, dolores ex sapiente iusto iure hic soluta assumenda.</p>
			</div>
			<div class="hc-content-block hc-tab04">
				<h4>This Is Tab 04 Content!</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
			</div>
		</div>
	</div>
</div>
<script>
	// Hello Content! (A Tabbing Script) by Memoria at The Initiative.
	// Last updated 07.22.18.
	helloContent('.hc-tabs-list li span');

	// You only need to add this function once
	function helloContent(selector) {
		var tabSelector = document.querySelectorAll(selector);

		// Check if selector is on the page
		if (tabSelector) {
			// Loop through tabs and add click event
			for (var i = 0; i < tabSelector.length; i++) {
				tabSelector[i].addEventListener( 'click', function(e) {
					// Store the current selector as a variable
					var current = e.target || e.srcElement;
					var dataAttribute = current.getAttribute('data-tab');

					// Get parent elements
					var tabContent = hcFindParent(current, 'hc-tabs-wrapper').querySelector('.hc-tab-content');
					var tabList = hcFindParent(current, 'hc-tabs-list');

					// Check if necessary elements are available
					if (tabList && tabContent) {
						if (tabList) {
							// Loop through hc-tabs-list child elements
							for (var j = 0; j < tabList.childNodes.length; j++) {
								var tabListOption = tabList.childNodes[j];
								var tabListClass = tabListOption.className;

								// Find any element with hc-tab-active and remove the class
								if (tabListClass && hcCheckValue(tabListClass, 'hc-tab-active')) {
									tabListOption.className = hcToggleClass('remove', tabListClass, 'hc-tab-active');
								}
							}

							// Add hc-tab-active to the new active tab
							current.parentNode.className = hcToggleClass('add', current.parentNode.className, 'hc-tab-active');
						}

						if (tabContent) {
							// Loop through hc-tabs-wrapper child elements
							for (var k = 0; k < tabContent.childNodes.length; k++) {
								var tabContentBlock = tabContent.childNodes[k];
								var tabContentClass = tabContentBlock.className;

								// Find the hc-content-block elements and add or remove hc-tab-show class
								if (tabContentClass && hcCheckValue(tabContentClass, 'hc-content-block')) {
									if (hcCheckValue(tabContentClass, 'hc-tab-show') && !hcCheckValue(tabContentClass, dataAttribute)) {
										tabContentBlock.className = hcToggleClass('remove', tabContentClass, 'hc-tab-show');
									} else if (!hcCheckValue(tabContentClass, 'hc-tab-show') && hcCheckValue(tabContentClass, dataAttribute)) {
										tabContentBlock.className = hcToggleClass('add', tabContentClass, 'hc-tab-show');
									}
								}
							}
						}
					}
				});
			}

			// Find specific parent selectors
			function hcFindParent(selector, selectorClass) {
				while (selector = selector.parentNode) {
					if (hcCheckValue(selector.parentNode.className, selectorClass)) {
						return selector.parentNode;
					}
				}
				return null;
			}

			// Add or remove classes
			function hcToggleClass(type, selectorClass, value) {
				var newClasses = (type == 'add') ? (selectorClass + ' ' + value) : selectorClass.replace(value, '');
				return newClasses.replace(/ +/g, ' ').trim()
			}

			// Check if the value is in the string
			function hcCheckValue(selector, find) {
				return (selector.indexOf(find) !== -1) ? true : false;
			}
		}
	}	
</script>