Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <form class="form-search">
    <input type="text" class="input-medium search-query" placeholder="search" id="search">
</form>
  <h2>Demo</h2>
​
<style id="search_style"></style>
​
<ul class="contacts">
    <!-- Data generated by Faker, see https://github.com/fzaninotto/Faker -->
    <li class="contact searchable" data-index="onabednarschamberger.frank@wuckert.com1-265-479-1196x714">
      <dl>
        <dt>First Name</dt>
        <dd>Ona</dd>
        <dt>Last Name</dt>
        <dd>Bednar</dd>
        <dt>Email</dt>
        <dd>schamberger.frank@wuckert.com</dd>
        <dt>Phone</dt>
        <dd>1-265-479-1196x714</dd>
    </dl>
</li>
<li class="contact searchable" data-index="newtoncronintorphy.dorothea@gmail.com(121)644-5577">
  <dl>
    <dt>First Name</dt>
    <dd>Newton</dd>
    <dt>Last Name</dt>
    <dd>Cronin</dd>
    <dt>Email</dt>
    <dd>torphy.dorothea@gmail.com</dd>
    <dt>Phone</dt>
    <dd>(121)644-5577</dd>
</dl>
</li>
<li class="contact searchable" data-index="adriannarathreymundo.hansen@hotmail.com119-040-0800x47661">
  <dl>
    <dt>First Name</dt>
    <dd>Adrianna</dd>
    <dt>Last Name</dt>
    <dd>Rath</dd>
    <dt>Email</dt>
    <dd>reymundo.hansen@hotmail.com</dd>
    <dt>Phone</dt>
    <dd>119-040-0800x47661</dd>
</dl>
</li>
<li class="contact searchable" data-index="damienhowehester30@kuhlman.org+97(7)8318939455">
  <dl>
    <dt>First Name</dt>
    <dd>Damien</dd>
    <dt>Last Name</dt>
    <dd>Howe</dd>
    <dt>Email</dt>
    <dd>hester30@kuhlman.org</dd>
    <dt>Phone</dt>
    <dd>+97(7)8318939455</dd>
</dl>
</li>
<li class="contact searchable" data-index="alaynabergnaumdeckow.evangeline@yahoo.com(274)890-0685">
  <dl>
    <dt>First Name</dt>
    <dd>Alayna</dd>
    <dt>Last Name</dt>
    <dd>Bergnaum</dd>
    <dt>Email</dt>
    <dd>deckow.evangeline@yahoo.com</dd>
    <dt>Phone</dt>
    <dd>(274)890-0685</dd>
</dl>
</li>
<li class="contact searchable" data-index="demetriswelchlonnie.fahey@welch.biz1-179-197-1006x350">
  <dl>
    <dt>First Name</dt>
    <dd>Demetris</dd>
    <dt>Last Name</dt>
    <dd>Welch</dd>
    <dt>Email</dt>
    <dd>lonnie.fahey@welch.biz</dd>
    <dt>Phone</dt>
    <dd>1-179-197-1006x350</dd>
</dl>
</li>
<li class="contact searchable" data-index="kennithlittelsmitham.amelia@gmail.com863.712.1363x9425">
  <dl>
    <dt>First Name</dt>
    <dd>Kennith</dd>
    <dt>Last Name</dt>
    <dd>Littel</dd>
    <dt>Email</dt>
    <dd>smitham.amelia@gmail.com</dd>
    <dt>Phone</dt>
    <dd>863.712.1363x9425</dd>
</dl>
</li>
<li class="contact searchable" data-index="sigridbeercbogan@crooks.com143-756-9961">
  <dl>
    <dt>First Name</dt>
    <dd>Sigrid</dd>
    <dt>Last Name</dt>
    <dd>Beer</dd>
    <dt>Email</dt>
    <dd>cbogan@crooks.com</dd>
    <dt>Phone</dt>
    <dd>143-756-9961</dd>
</dl>
</li>
<li class="contact searchable" data-index="yvettehammesbrown.lorenzo@grimesstanton.com449-149-4595x297">
  <dl>
    <dt>First Name</dt>
    <dd>Yvette</dd>
    <dt>Last Name</dt>
    <dd>Hammes</dd>
    <dt>Email</dt>
    <dd>brown.lorenzo@grimesstanton.com</dd>
    <dt>Phone</dt>
    <dd>449-149-4595x297</dd>
</dl>
</li>
<li class="contact searchable" data-index="coltmurazikclarissa.yundt@yahoo.com(746)735-9791">
  <dl>
    <dt>First Name</dt>
    <dd>Colt</dd>
    <dt>Last Name</dt>
    <dd>Murazik</dd>
    <dt>Email</dt>
    <dd>clarissa.yundt@yahoo.com</dd>
    <dt>Phone</dt>
    <dd>(746)735-9791</dd>
</dl>
</li>
</ul>
​
​
<script type="text/javascript">
​
</script>
  
  
</body>
</html>
 
<style>
#post ul.contacts {
    margin-left: 0;
}
li.contact {
    list-style-type: none;
    background-color: #dceaf4;
    border-radius: 3px;
    padding: 10px;
    margin: 10px;
}
li.contact dl {
    margin: 0;
}
li.contact dt {
    font-weight: bold;
}
li.contact dt, li.contact dd {
    line-height: 20px;
}
form.form-search {
    float: right;
    margin-top: 2px;
}
input.search-query {
    height: 20px;
    padding: 4px 6px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    color: #555;
    margin-bottom: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border linear .2s,box-shadow linear .2s;
    -moz-transition: border linear .2s,box-shadow linear .2s;
    -o-transition: border linear .2s,box-shadow linear .2s;
    transition: border linear .2s,box-shadow linear .2s;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
</style>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jinlongzpro
0viewers