Not to be deterred, I dug into their code, copied the portion I was interested in, removed all of the useless cruft, gave the CSS classes slightly more useful names, and came up with a working version that looked like this:

That should look rather familiar to you.

Seeing as I couldn’t find anything on the Intertubes for this (and I’m probably not the only one) I thought it might be helpful to share the HTML and CSS code for this — there’s also one image which is used as a gradient background for the search button (entirely optional; it just makes it look nice). If you find this useful leave a comment and let me know.

Right click and Save as:

• HTML with embedded CSS
• Image file (background image for button)

In the middle of March I was doing some research for a blog post and I came across a contest that Zappos was running. I had recently decided that I was spending too much time building web apps for $0/hour, so I almost didn’t enter, but I had an idea that I thought I could pull off without investing too much time. My intent was to build something that was fairly simple but very polished.

I spent a couple weeks (about 40 hours total) throwing together an app in my spare time. I thought my app was good, but I’ve entered contests like this before where the entrants pour lots of time into it and produce something really stellar. So it was much to my surprise that I ended up winning the top prize in the contest (a cool $500 cash plus a $500 gift certificate to Zappos). That alone was enough to make building the app worth my while, but what happened next was even better.

Shortly after I won I posted a quick tweet about it. I have some folks from the Silicon Prairie News as followers and my tweet led to me getting an interview request. I wrote up some answers (reviewed by my wife, thanks!) and they posted an article about it the following day. That article was then mentioned in the weekly PrairieCast postcast (starting at 21:00). I was also contacted by several people who read the article about projects that they wanted my help on.

When I decided to enter the contest in never crossed my mind that it would lead to me being featured on SPN and being offered work. That goes to show though, it is definitely possible to attract luck. You don’t know how that luck will manifest itself, but it will. Do cool stuff, be social, and luck will find you.

Regarding “Attracting Luck”: it sounds like a value-free bromide, but it really does work. I’m not a social butterfly by nature, but I force myself to go out and network. It blows my mind how effective that is, because there exists someone with the ability to give you what you want just by saying “Yeah, sure” and that is 1000000000x more likely to happen after you have asked him for it in person versus happening spontaneously. (Ditto hearing, e.g., “You do SEO consulting? What a coincidence, we need that. Send us a proposal.”, “You made what? That’s interesting. I have someone you should get a coffee with.”, etc)
-Patrick McKenzie

Simple, right? I sure wasn’t going to go reinvent the wheel by writing my own CSS for them though. Thankfully after searching for a bit I came across SimpleBits’ Mini Tabs. I didn’t want mini-tabs, but the HTML and CSS was remarkably clean. Only 4 CSS declarations on a simple HTML list with a class=”active” for the current tab. With some modification to the CSS I was able to come up with tabs that looked like the above (even looks good in IE7, amazingly).

So, if you want some decent looking/functioning tabs go yank the HTML/CSS from the above link.