http://codepen.io/anon/pen/zKdzkg

index.html

  <h1 class="logo">
    <span class="word1">scram</span> <br />
    <span class="word2">solutions</span>
  </h1>

<div class="form">
      
      <ul class="tab-group">
        <li class="tab active"><a href="#signup">Scrambled Words</a></li>
        <li class="tab"><a href="#login">Word List</a></li>
      </ul>
      
      <div class="tab-content">
        <div id="signup">   
          <h1>Unscrammble Scrambled Words!</h1>
          
          <form action="/" method="post">
          
            <div class="field-wrap">
            <label>
              Scrambled Words<span class="req">*</span>
            </label>
              <textarea name="scrambled" id="scrambled" cols="30" rows="10"></textarea>
          </div>
            <p class="solution-title">Solutions</p>
            <p class="solution-area"></p>
          <button type="submit" class="button button-block"/>Solve!</button>
          
          </form>

        </div>
        
        <div id="login">   
          <h1>Unscramble Scrambled Words!</h1>
          
          <form action="/" method="post">
          
            <div class="field-wrap">
            <label>
              Wordlist<span class="req">*</span>
            </label>
              <textarea name="wordlist" id="wordlist" cols="30" rows="10"></textarea>
          </div>
          
                    
          <button onClick="unscramble();" class="button button-block"/>Solve!</button>
          
          </form>

        </div>
        
      </div><!-- tab-content -->
      
</div> <!-- /form -->

scram.js

$('.form').find('input, textarea').on('keyup blur focus', function (e) {
  
  var $this = $(this),
      label = $this.prev('label');

	  if (e.type === 'keyup') {
			if ($this.val() === '') {
          label.removeClass('active highlight');
        } else {
          label.addClass('active highlight');
        }
    } else if (e.type === 'blur') {
    	if( $this.val() === '' ) {
    		label.removeClass('active highlight'); 
			} else {
		    label.removeClass('highlight');   
			}   
    } else if (e.type === 'focus') {
      
      if( $this.val() === '' ) {
    		label.removeClass('highlight'); 
			} 
      else if( $this.val() !== '' ) {
		    label.addClass('highlight');
			}
    }

});

$('.tab a').on('mouseover', function (e) {
  
  e.preventDefault();
  
  $(this).parent().addClass('active');
  $(this).parent().siblings().removeClass('active');
  
  target = $(this).attr('href');

  $('.tab-content > div').not(target).hide();
  
  $(target).fadeIn(600);
  
});

function unscramble() {
  var scrambled_words = document.getElementById('scrambled').value.split("\n");
  var wordList        = document.getElementById('wordlist').value.split("\n");

  for (var i = 0; i < scrambled_words.length; i++) {
    var scram_word = scrambled_words[i];
    for (var x = 0; x < wordList.length; x++) {
      var word_in_list = wordList[x];
      console.log("Compare: " + scram_word + " : " + word_in_list);
      a = sort_word(scram_word);
      b = sort_word(word_in_list);
      if(a == b) {
        console.log("TRUE!");
        document.getElementById('solution-area').innerHTML += word_in_list + '</br>';
      } else {
        console.log("FALSE!");
      }
    }
  }
}

function sort_word(word) {
	return word.split('').sort().join('');
}

style.css

@import "compass/css3";

$body-bg: #c1bdba;
$form-bg: #13232f;
$white: #ffffff;

$main: #1ab188;
$main-light: lighten($main,5%);
$main-dark: darken($main,5%);

$gray-light: #a0b3b0;
$gray: #ddd;

$thin: 300;
$normal: 400;
$bold: 600;
$br: 4px;

*, *:before, *:after {
  box-sizing: border-box;
}


html {
	overflow-y: scroll; 
}

.logo {
  font: 84px 'Arial Narrow', sans-serif;/* I picked this font because it's the closest looking 'web safe' font http://cssfontstack.com/ */
  color: #fefefe;
  text-transform: uppercase;
  letter-spacing: -4px;
}

/* stuff for both words */
.logo span {
  position: relative;
}
.logo span:before,
.logo span:after {
  content: '';
  position: absolute;
  border-width: 32px;/* makes a nice, big 64px square */
  border-style: solid;
  border-color: transparent;
  height: 0;
  z-index: 10;
}

/* stuff for 1st word */
.logo .word1 {
  color: #dc006c;
  margin-right: -38px;
  transform: rotateY(180deg);/* using Prefix free */
  display: inline-block;/* required for transform */
  z-index: 10;/* stack 1st word on top */
}
.logo .word1:before {
  right: -4px;/* would be left, but we flipped the word */
  top: -9px;
  border-top-color: #c1bdba;/* match background color */
  border-right-color: #c1bdba;/* would be left, but we flipped the word */
}
.logo .word1:after {
  left: 17px;/* would be right, but we flipped the word */
  bottom: -15px;
  border-bottom-color: #c1bdba;
  border-left-color: #c1bdba;/* would be right, but we flipped the word */
}

/* stuff for 2nd word */
.logo .word2 {
  z-index: 0;/* stack 2nd word below */
}
.logo .word2:before {
  left: -4px;
  top: -6px;
  border-top-color: #c1bdba;
  border-left-color: #c1bdba;
}
.logo .word2:after {
  right: -4px;  
  bottom: 4px;
  border-bottom-color: #c1bdba;
  border-right-color: #c1bdba;
}

body {
  background:$body-bg;
  font-family: 'Titillium Web', sans-serif;
}

a {
  text-decoration:none;
  color:$main;
  transition:.5s ease;
  &:hover {
    color:$main-dark;
  }
}

.form {
  background:rgba($form-bg,.9);
  padding: 40px;
  max-width:600px;
  margin:40px auto;
  border-radius:$br;
  box-shadow:0 4px 10px 4px rgba($form-bg,.3);
}

.tab-group {
  list-style:none;
  padding:0;
  margin:0 0 40px 0;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  li a {
    display:block;
    text-decoration:none;
    padding:15px;
    background:rgba($gray-light,.25);
    color:$gray-light;
    font-size:20px;
    float:left;
    width:50%;
    text-align:center;
    cursor:pointer;
    transition:.5s ease;
    &:hover {
      background:$main-dark;
      color:$white;
    }
  }
  .active a {
    background:$main;
    color:$white;
  }
}

.tab-content > div:last-child {
  display:none;
}


h1 {
  text-align:center;
  color:$white;
  font-weight:$thin;
  margin:0 0 40px;
}

label {
  position:absolute;
  transform:translateY(6px);
  left:13px;
  color:rgba($white,.5);
  transition:all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size:22px;
  .req {
  	margin:2px;
  	color:$main;
  }
}

label.active {
  transform:translateY(50px);
  left:-20px;
  top:-110px;
  font-size:48px;
  .req {
    opacity:0;
  }
}

label.highlight {
	color:$white;
}

input, textarea {
  font-size:22px;
  display:block;
  width:100%;
  height:100%;
  padding:5px 10px;
  background:none;
  background-image:none;
  border:1px solid $gray-light;
  color:$white;
  border-radius:0;
  transition:border-color .25s ease, box-shadow .25s ease;
  &:focus {
		outline:0;
		border-color:$main;
  }
}

textarea {
  border:2px solid $gray-light;
  resize: vertical;
  width: 100%;
}

.field-wrap {
  position:relative;
  margin-bottom:40px;
}

.top-row {
  &:after {
    content: "";
    display: table;
    clear: both;
  }

  > div {
    float:left;
    width:48%;
    margin-right:4%;
    &:last-child { 
      margin:0;
    }
  }
}

.button {
  border:0;
  outline:none;
  border-radius:0;
  padding:15px 0;
  font-size:2rem;
  font-weight:$bold;
  text-transform:uppercase;
  letter-spacing:.1em;
  background:$main;
  color:$white;
  transition:all.5s ease;
  -webkit-appearance: none;
  &:hover, &:focus {
    background:$main-dark;
  }
}

.button-block {
  display:block;
  width:50%;
  margin:auto;
}

.solution-area {
  color:white;
  font-size:32px;
  margin:auto;
  display:block;
  width:50%;
  border-style: solid;
  border: 2p;
  border-right: hidden;
  border-bottom: hidden;
}

.solution-title {
  color:white;
  font-size:32px;
  margin:auto;
  display:block;
  width:25%;
}
.forgot {
  margin-top:-20px;
  text-align:right;
}