JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
  <div id="header" class="clearfix">
      <div>
          <h1><a href="/" title="My Startup Name"><img src="/assets/images/logo.png" alt="My Startup Name" class="main_logo" /></a></h1>
                  <div id="links">
              <ul>
                  <li id="nav3">
                      <a href="/page/view/how-it-works">
                          <span>See</span>
                          <strong>How it Works</strong>
                      </a>
                  </li>
                  <li id="nav2">
                      <a href="/page/view/aboutlocal">
                          <span>It's All</span>
                          <strong>About Local</strong>
                      </a>
                  </li>
              </ul>
          </div>
          <div id="hello_msg">FName LName</div>
          <div id="my_account">
              <div id="my_account_container">
                  <div id="corner"></div>
                  <div id="text"><span>My Account</span></div>
                  <div id="dropdown">
                      <ul>
                          <li><a href="/control_panel" >Print My Cash</a></li><li><a href="/control_panel" >Settings</a></li><li><a href="/logout" >Logout</a></li>
                      </ul>
                  </div>
              </div>
          </div>
      </div>
  </div>
</body>
</html>

CSS

#header {
  height: 52px;
  background: {
    image: url($header_bg);
    repeat: repeat-x; };
  #spacer {
    float: left;
    width: 950px - 230px - 140px - 140px;
    height: 52px; }
  div {
    @include container;
    text-align: left;
    h1 {
      float: left;
      width: 230px;
      height: 52px;
      margin: 0;
      padding: 0; }
    ul {
      text-transform: uppercase;
      @include horizontal-list;
      overflow: visible; }
    #links {
      float: left;
      width: 300px;
      margin-left: 140px;
      ul {
        @include column(8, last);
        li {
          @include column(4, last);
          margin-top: 10px;
          position: relative;
          border-left: 1px solid #404242;
          text-indent: -9999px;
          a {
            margin-left: 10px;
            display: block;
            text-decoration: none;
            &:hover {
              strong {
                color: $orange_hover;
                @include text-shadow(2px, #fff); } }
            span {
              display: block;
              font-weight: normal;
              font-size: 12px;
              line-height: 14px;
              color: #fff;
              @include text-shadow(1px, #fff); }
            strong {
              display: block;
              line-height: 16px;
              font-size: 14px;
              color: $orange;
              @include text-shadow(1px, #000); } } }
        @for $i from 1 through 3 {
          //$nav_width: 125px
          //@if $i == 3
          // //$nav_width: 125px
          #nav#{$i} a {
            //width: $nav_width
            @include column(4, last);
            display: block;
            //height: 35px
            @include sprite-img("/assets/images/nav#{$i}.jpg", 1, 1, 110, 32);
            &:hover {
              display: block;
              @include sprite-img("/assets/images/nav#{$i}.jpg", 1, 2, 110, 32); } } } } }
    #account {
      width: 140px;
      float: left;
      height: 25px;
     ...

JavaScript

$('my_account').addEvent('mouseover', function() {
        $('dropdown').setStyle('display', 'block');
        $('text').setStyle('background', '#1a1b1b url(\"/assets/images/images8/my_account_arrow_down.png\") no-repeat 95% center !important');
        $('dropdown').setStyle('background', '#1a1b1b url(\"/assets/images/images8/my_account_arrow_down.png\") no-repeat 95% center !important');
    });
    $('my_account').addEvent('mouseout', function() {
        $('dropdown').setStyle('display', 'none');
        $('text').setStyle('background', 'transparent url(\"/assets/images/images8/my_account_arrow_left.png\") no-repeat 95% center !important');
    });