A CodePen by Prima Utama Apriansyah. Popcorn — A popular selection of Form elements - Currently a work in progress: check out live version on mobile & tablet: http://popcorn.im Fork & contribute: http://github.com/dope/popcorn

index.html

	<div class="frame logo">
		<div class="bit-1">
      <img src="http://popcorn.im/img/popcorn.svg"/>
			<h1>Popcorn</h1>
			<p>Popular Form UI elements written in LESS</p>
		</div>
	</div>


	<div class="frame">
		<div class="bit-10">
			<figure class="dark">#0c0c0c</figure>
		</div>

		<div class="bit-10">
			<figure class="gold">#ffd464</figure>
		</div>

		<div class="bit-10">
			<figure class="mint">#68c39f</figure>
		</div>

		<div class="bit-10">
			<figure class="salmon">#fa6a6a</figure>
		</div>

		<div class="bit-10">
			<figure class="slate">#2a3644</figure>
		</div>

		<div class="bit-10">
			<figure class="sky">#40a9e0</figure>
		</div>

		<div class="bit-10">
			<figure class="pink">#dd577a</figure>
		</div>

		<div class="bit-10">
			<figure class="beige">#fff0cf</figure>
		</div>

		<div class="bit-10">
			<figure class="blue">#7bd2de</figure>
		</div>

		<div class="bit-10">
			<figure class="turq">#1cbabc</figure>
		</div>
	</div>

	<div class="frame">
		<div class="bit-2">
			<div class="icons">
				<i class="glyph-user"></i>
				<i class="glyph-lock"></i>
				<i class="glyph-cog"></i>
				<i class="glyph-love"></i>
				<i class="glyph-left"></i>
				<i class="glyph-tick-circle"></i>
				<i class="glyph-cross-circle"></i>
				<i class="glyph-cross"></i>
				<i class="glyph-tick"></i>
				<i class="glyph-right"></i>
				<i class="glyph-list"></i>
				<i class="glyph-search"></i>
				<i class="glyph-speech"></i>
				<i class="glyph-eye"></i>
				<i class="glyph-pin"></i>
			</div>
		</div>

		<div class="bit-2">
			<div class="icons darkIcons">
				<i class="glyph-user-white"></i>
				<i class="glyph-lock-white"></i>
				<i class="glyph-cog-white"></i>
				<i class="glyph-love-white"></i>
				<i class="glyph-left-white"></i>
				<i class="glyph-tick-circle-white"></i>
				<i class="glyph-cross-circle-white"></i>
				<i class="glyph-cross-white"></i>
				<i class="glyph-tick-white"></i>
				<i class="glyph-right-white"></i>
				<i class="glyph-list-white"></i>
				<i class="glyph-search-white"></i>
				<i class="glyph-speech-white"></i>
				<i class="glyph-eye-white"></i>
				<i class="glyph-pin-white"></i>
			</div>
		</div>
	</div>

	<div class="frame">
		<div class="bit-6">
			<button class="salmon">Settings</button>
		</div>

		<div class="bit-6">
			<button class="slate">Recommend</button>
		</div>

		<div class="bit-6">
			<button class="blue">Delete</button>
		</div>

		<div class="bit-6">
			<button class="turq">Location</button>
		</div>

		<div class="bit-6">
			<button class="gold">Visuals</button>
		</div>

		<div class="bit-6">
			<button class="strawb">Navigation</button>
		</div>
	</div>

	<div class="frame">
		<div class="bit-6">
			<button class="salmon slight">Settings</button>
		</div>

		<div class="bit-6">
			<button class="slate slight">Recommend</button>
		</div>

		<div class="bit-6">
			<button class="blue slight">Delete</button>
		</div>

		<div class="bit-6">
			<button class="turq slight">Location</button>
		</div>

		<div class="bit-6">
			<button class="gold slight">Visuals</button>
		</div>

		<div class="bit-6">
			<button class="strawb slight">Navigation</button>
		</div>
	</div>

	<div class="frame">
		<div class="bit-6">
			<button class="salmon pill">Settings</button>
		</div>

		<div class="bit-6">
			<button class="slate pill">Recommend</button>
		</div>

		<div class="bit-6">
			<button class="blue pill">Delete</button>
		</div>

		<div class="bit-6">
			<button class="turq pill">Location</button>
		</div>

		<div class="bit-6">
			<button class="gold pill">Visuals</button>
		</div>

		<div class="bit-6">
			<button class="strawb pill">Navigation</button>
		</div>
	</div>

	<div class="frame">
		<div class="bit-3">
			<input class="firstInput" placeholder="Search" type="text"/>
			<button class="turq"><i class="glyph-search"></i></button>
		</div>

		<div class="bit-3">
			<input class="secondInput" placeholder="Search" type="text"/>
			<button class="strawb"><i class="glyph-search"></i></button>
		</div>

		<div class="bit-3">
			<input class="thirdInput" placeholder="Search" type="text"/>
			<button class="blue"><i class="glyph-search"></i></button>
		</div>
	</div>

	<div class="frame">
		<div class="bit-3">
			<input class="gold sub" placeholder="[email protected]" type="email"/>
		</div>

		<div class="bit-3">
			<input class="turq sub" placeholder="[email protected]" type="email"/>
		</div>

		<div class="bit-3">
			<input class="salmon sub" placeholder="[email protected]" type="email"/>
		</div>
	</div>

	<div class="frame">
		<div class="bit-3">
			<input class="blue sub" placeholder="[email protected]" type="email"/>
		</div>

		<div class="bit-3">
			<input class="mint sub" placeholder="[email protected]" type="email"/>
		</div>

		<div class="bit-3">
			<input class="pink sub" placeholder="[email protected]" type="email"/>
		</div>
	</div>

	<div class="frame">
		<div class="bit-3">
			<form class="one">
				<input type="text" placeholder="Username"/>
				<input type="password" placeholder="Password"/>
				<button>Login</button>
			</form>
		</div>

		<div class="bit-3">
			<form class="two">
				<input type="text" placeholder="Username"/>
				<input type="password" placeholder="Password"/>
				<button>Login</button>
			</form>
		</div>

		<div class="bit-3">
			<form class="three">
				<input type="text" placeholder="Username"/>
				<input type="password" placeholder="Password"/>
				<button>Login</button>
			</form>
		</div>

	</div>

	<div class="frame">

		<div class="bit-2">
			<form class="one">
				<input type="text" placeholder="Full name"/>
				<input type="email" placeholder="Email Address"/>
				<textarea placeholder="Enter your message"></textarea>
				<button>Send</button>
			</form>
		</div>

		<div class="bit-2">
			<form class="two">
				<input type="text" placeholder="Full name"/>
				<input type="email" placeholder="Email Address"/>
				<textarea placeholder="Enter your message"></textarea>
				<button>Send</button>
			</form>
		</div>
	</div>
<!-- End of Elements
=========================-->	

<link rel="stylesheet" type="text/css" href="http://joey.so/lemonade/css/lemonade.css">
 
<link rel="stylesheet" type="text/css" href="http://joey.so/lemonade/css/responsive.css">

script.js

// Be sure to check it out full screen: http://cdpn.io/lxypa

style.css

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
input,
button,
textarea {
  margin: 0;
  font-size: 100%;
}
input:focus,
button:focus,
textarea:focus {
  outline: none;
}
label,
select,
button,
input[type="submit"],
input[type="radio"],
input[type="checkbox"] input[type="button"] {
  cursor: pointer;
}
a,
a:visited,
a:active {
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
a:hover,
a:visited:hover,
a:active:hover {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
body {
  font-family: "Source Sans Pro" Helvetica Neue, Arial;
  font-size: 15px;
  line-height: 1.25em;
  color: #777777;
  background: #ffffff;
}
.bit-10 > figure {
  width: 100%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  padding: 20px 0px 20px 0px;
  color: #ffffff;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.bit-10 > figure:hover {
  -webkit-opacity: 0.9;
  -moz-opacity: 0.9;
  opacity: 0.9;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.dark {
  background: #0c0c0c;
}
.gold {
  background: #ffd464;
}
.mint {
  background: #68c39f;
}
.salmon {
  background: #fa6a6a;
}
.slate {
  background: #2a3644;
}
.sky {
  background: #40a9e0;
}
.pink {
  background: #dd577a;
}
.beige {
  background: #fff0cf;
}
.strawb {
  background: #ce5973;
}
.turq {
  background: #20b9a4;
}
.blue {
  background: #7bd2de;
}
[class*="glyph-"] {
  background: url('http://popcorn.im/img/icons.svg');
  width: 25px;
  height: 18px;
  display: inline-block;
  vertical-align: top;
  margin-right: 4px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
[class*="glyph-"]:hover {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-opacity: 0.9;
  -moz-opacity: 0.9;
  opacity: 0.9;
}
.glyph-user {
  background-position: 0 0px;
}
.glyph-lock {
  background-position: -45px 0;
}
.glyph-cog {
  background-position: -90px 0;
}
.glyph-love {
  background-position: -138px 0;
}
.glyph-left {
  background-position: -186px 0;
}
.glyph-tick-circle {
  background-position: 0px -47px;
}
.glyph-cross-circle {
  background-position: -45px -47px;
}
.glyph-cross {
  background-position: -90px -47px;
}
.glyph-tick {
  background-position: -138px -47px;
}
.glyph-right {
  background-position: -186px -47px;
}
.glyph-list {
  background-position: 0 -93px;
}
.glyph-search {
  background-position: -45px -93px;
}
.glyph-speech {
  background-position: -93px -93px;
}
.glyph-eye {
  background-position: -142px -93px;
}
.glyph-pin {
  background-position: -186px -93px;
}
.glyph-user-white {
  background-position: 0 -128px;
}
.glyph-lock-white {
  background-position: -45px -128px;
}
.glyph-cog-white {
  background-position: -91px -128px;
}
.glyph-love-white {
  background-position: -138px -127px;
}
.glyph-left-white {
  background-position: -186px -127px;
}
.glyph-tick-circle-white {
  background-position: 0px -175px;
}
.glyph-cross-circle-white {
  background-position: -45px -175px;
}
.glyph-cross-white {
  background-position: -90px -175px;
}
.glyph-tick-white {
  background-position: -140px -175px;
}
.glyph-right-white {
  background-position: -186px -175px;
}
.glyph-list-white {
  background-position: 0 -221px;
}
.glyph-search-white {
  background-position: -45px -221px;
}
.glyph-speech-white {
  background-position: -93px -221px;
}
.glyph-eye-white {
  background-position: -144px -221px;
}
.glyph-pin-white {
  background-position: -190px -221px;
}
.bit-6 > button {
  width: 100%;
  padding: 10px;
  border: 0;
  color: #ffffff;
  vertical-align: top;
  font-size: 1.2em;
}
.slight {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
}
.pill {
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
}
.bit-3 {
  position: relative;
}
.bit-3 > input {
  padding: 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  width: 100%;
  border: 0;
}
.bit-3 > input:-moz-placeholder {
  color: #0c0c0c;
}
.bit-3 > input:-ms-input-placeholder {
  color: #0c0c0c;
}
.bit-3 > input::-webkit-input-placeholder {
  color: #0c0c0c;
}
.bit-3 > input:-moz-placeholder {
  color: #0c0c0c;
}
.bit-3 > input:-ms-input-placeholder {
  color: #0c0c0c;
}
.bit-3 > input::-webkit-input-placeholder {
  color: #0c0c0c;
}
.bit-3 > input:-moz-placeholder {
  color: #0c0c0c;
}
.bit-3 > input:-ms-input-placeholder {
  color: #0c0c0c;
}
.bit-3 > input::-webkit-input-placeholder {
  color: #0c0c0c;
}
.bit-3 > input:-moz-placeholder {
  color: #0c0c0c;
}
.bit-3 > input:-ms-input-placeholder {
  color: #0c0c0c;
}
.bit-3 > input::-webkit-input-placeholder {
  color: #0c0c0c;
}
.bit-3 > button {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 15%;
  background: #ffffff;
  border: 0;
  padding: 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  vertical-align: top;
}
.bit-3 > .firstInput {
  border: 2px solid #20b9a4;
  color: #20b9a4;
}
.bit-3 > .secondInput {
  border: 2px solid #ce5973;
  color: #ce5973;
}
.bit-3 > .thirdInput {
  border: 2px solid #7bd2de;
  color: #7bd2de;
}
.sub {
  padding: 15px!important;
}
.sub:-moz-placeholder {
  color: #ffffff !important;
}
.sub:-ms-input-placeholder {
  color: #ffffff !important;
}
.sub::-webkit-input-placeholder {
  color: #ffffff !important;
}
.sub:-moz-placeholder {
  color: #ffffff !important;
}
.sub:-ms-input-placeholder {
  color: #ffffff !important;
}
.sub::-webkit-input-placeholder {
  color: #ffffff !important;
}
.sub:-moz-placeholder {
  color: #ffffff !important;
}
.sub:-ms-input-placeholder {
  color: #ffffff !important;
}
.sub::-webkit-input-placeholder {
  color: #ffffff !important;
}
.sub:-moz-placeholder {
  color: #ffffff !important;
}
.sub:-ms-input-placeholder {
  color: #ffffff !important;
}
.sub::-webkit-input-placeholder {
  color: #ffffff !important;
}
.bit-3 > form > input {
  display: block;
  width: 100%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  padding: 20px;
  margin-bottom: 5px;
  padding-left: 25px;
}
.bit-3 > form > button {
  width: 100%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  padding: 15px;
  color: #ffffff;
  border: 0;
}
.bit-3 > .one > input {
  border: 2px solid #2a3644;
}
.bit-3 > .one > button {
  background: #2a3644;
}
.bit-3 > .two > input {
  border: 2px solid #fa6a6a;
}
.bit-3 > .two > button {
  background: #fa6a6a;
}
.bit-3 > .three > input {
  border: 2px solid #7bd2de;
}
.bit-3 > .three > button {
  background: #7bd2de;
}
.bit-2 > form > input,
textarea {
  width: 100%;
  resize: none;
  margin-bottom: 10px;
  padding: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.bit-2 > form > textarea {
  height: 150px;
}
.bit-2 > form > button {
  width: 100%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  margin-top: 10px;
  padding: 15px;
  color: #ffffff;
  border: 0;
}
.bit-2 > .one > input,
textarea {
  border: 2px solid #40a9e0;
}
.bit-2 > .one > button {
  background: #40a9e0;
}
.bit-2 > .two > input,
.bit-2 > .two > textarea {
  border: 2px solid #20b9a4;
}
.bit-2 > .two > button {
  background: #20b9a4;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
input,
button,
textarea {
  margin: 0;
  font-size: 100%;
}
input:focus,
button:focus,
textarea:focus {
  outline: none;
}
label,
select,
button,
input[type="submit"],
input[type="radio"],
input[type="checkbox"] input[type="button"] {
  cursor: pointer;
}
a,
a:visited,
a:active {
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
a:hover,
a:visited:hover,
a:active:hover {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
body {
  background: #ffffff;
  font-family: "Source Sans Pro" Helvetica Neue, Arial;
  font-size: 15px;
  color: #777777;
  line-height: 1.25em;
}
.frame {
  width: 90%;
  margin: 0 auto;
}
.icons {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background: #fff0cf;
  padding: 20px;
  text-align: center;
}
.darkIcons {
  background: #dd577a;
}
.logo {
  text-align: center;
}
.logo > .bit-1 > img {
  margin-top: 40px;
  width: 50px;
}
.logo > .bit-1 > h1 {
  font-size: 4em;
  text-transform: uppercase;
  color: #2a3644;
  font-weight: 900;
  padding-top: 30px;
}
.logo > .bit-1 > p {
  padding: 25px;
  padding-bottom: 30px;
}
.footer {
  text-align: center;
  padding: 10px;
}