JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<!--Main Container -->
<div class="container">
	<!--Sub Content Block-->
	<div class="container-fluid jumbotron pageHead">

	<div class="row">
		<div class="col-md-12">
			<div class="row alignCent">
				<h1><b>codeathon</b>2017<span class="regiMark">&reg;</span></h1>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-12">
			<div class="row alignCent">
				<h1>Geek Night Coimbatore</h1>
			</div>
		</div>
	</div>

	</div>


	<div class="row">
		<div class="col-md-12">
			<div class="row alignCent">
				<h6>an open forum for geeks to connect, discuss & learn latest ideas, technologies and trends in software development</h6>
			</div>
		</div>
	</div>


	<div class="row timeContent">
		<div class="col-md-12">
			<div class="row">
				<div class="col-md-4 timeStyle">
					<p>10<sup>th</sup>edition</p>
					<h6 class="counttwn">jul 20</h6>
				</div>
				<div class="col-md-2 timeStyle">
					<h6 class="timeTop">X</h6>
					<h6 class="h6">days</h6>
				</div>
				<div class="col-md-2 timeStyle">
					<h6 class="timeTop">X</h6>
					<h6 class="h6">hours</h6>
				</div>
				<div class="col-md-2 timeStyle">
					<h6 class="timeTop">X</h6>
					<h6 class="h6">minutes</h6>
				</div>
				<div class="col-md-2 timeStyle">
					<h6 class="timeTop">X</h6>
					<h6 class="h6">seconds</h6>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12 eventMargin">
			<div class="row">
				<div class="col-md-4 participate">
					<h6><a class="parti" href="">Participate</a></h6>
				</div>
				<div class="col-md-3">
					<h3 class="mid"><< Or >></h3>
				</div>
				<div class="col-md-4 participate">
					<h6><a class="parti" href="">Present</a></h6>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container-fluid bgBck">
<h6 class="infoText">
	 Geek Night is a monthly event to promote sharing of technical knowledge and increase collaboration between geeks in Coimbatore. It is organized by a passionate group of programmers and sponsored...

CSS

.alignCent
	{
		text-align: center;
	}

	body {
		background-color: #FFF;
		font-family: "Segoe UI", "Segoe WP", "Helvetica Neue", sans-serif;
		color: #333;
	}

	h1, h2, h3, h4, h5,.h1, .h2, .h3, .h4, .h5 {
		font-weight: 400;
		font-size: 72px;
		font-family: "Segoe UI", "Segoe WP", "Helvetica Neue", sans-serif;
	}

	h6
	{
		font-size: 38px;
	}

	.h6
	{
		font-size: 30px;
		border-top:1px solid #D3D3D3;
		text-align: center;
	}

	.counttwn
	{
		color: #4885ed;
		border-top:1px solid #D3D3D3;
		text-align: center;

	}

	.timeStyle
	{
		text-align: center;
	}

	.timeTop
	{
		color: #4885ed;
		text-align: center;
		font-size: 24px;
	}

	.regiMark
	{
		font-size: 12px;
		position: absolute;
		top: 30px;
		font-weight: bold;
	}

	.timeContent
	{
		padding-top: 20px;
	}

	.participate
	{
		background-color: #4885ed;
		text-align: center;
		padding: 10px;
		margin: 10px;
		border-radius: 5px;
	}

	.parti
	{
		color: white;
		text-decoration: none;
		font-size: 34px;
	}

	.parti:hover
	{
		color: white;
		text-decoration: none;
	}

	.mid
	{
		color: #D3D3D3;
		font-size: 28px;
		text-align: center;
	}

	.eventMargin
	{
		margin: 20px;
	}

	.pageHead
	{
		margin-top: 10px;
	}


	.participate:hover 
	{
		animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
		transform: translate3d(0, 0, 0);
		backface-visibility: hidden;
		perspective: 1000px;
	}


	.infoText
	{
		padding: 100px;
		color: white;
	}

	.bgBck
	{
		margin-top: 40px;
		background-image: url('divbg.png');
		widows: 100%;
	}


	@keyframes shake {
		10%, 90% {
			transform: translate3d(-1px, 0, 0);
		}

		20%, 80% {
			transform: translate3d(2px, 0, 0);
		}

		30%, 50%, 70% {
			transform: translate3d(-4px, 0, 0);
		}

		40%, 60% {
			transform: translate3d(4px, 0, 0);
		}
	}

JavaScript

https://twcbe.github.io/geeknight/