Minimal Sign Up


<nav class="flex justify-between bb b--white-10">
  <a class="link white-70 hover-white no-underline flex items-center pa3" href="">
      class="dib h1 w1"
      viewBox="0 0 32 32"
      <title>Super Normal Icon Mark</title>
      <path d="M2 2 L10 2 L10 10 L2 10z M12 2 L20 2 L20 10 L12 10z M22 2 L30 2 L30 10 L22 10z M2 12 L10 12 L10 20 L2 20z M12 12 L20 12 L20 20 L12 20z M22 12 L30 12 L30 20 L22 20z M2 22 L10 22 L10 30 L2 30z M12 22 L20 22 L20 30 L12 30z M22 22 L30 22 L30 30 L22 30z">
  <div class="flex-grow pa3 flex items-center">
    <a class="f6 link dib white dim mr3 mr4-ns" href="#0">About</a>
    <a class="f6 link dib white dim mr3 mr4-ns" href="#0">Sign In</a>
    <a class="f6 dib white bg-animate hover-bg-white hover-black no-underline pv2 ph4 br-pill ba b--white-20" href="#0">Sign Up</a>


.ba {
    border-style: solid;
    border-width: 1px;

.bb {
    border-bottom-style: solid;
    border-bottom-width: 1px;

.b--white-20 {
    border-color: rgba(255, 255, 255, .2);

.b--white-10 {
    border-color: rgba(255, 255, 255, .1);

.br-pill {
    border-radius: 9999px;

.dib {
    display: inline-block;

.flex {
    display: flex;

.items-center {
    align-items: center;

.justify-between {
    justify-content: space-between;

.h1 {
    height: 1rem;

.link {
    text-decoration: none;
    transition: color .15s ease-in;

.link:link, .link:visited {
    transition: color .15s ease-in;

.link:hover {
    transition: color .15s ease-in;

.link:active {
    transition: color .15s ease-in;

.link:focus {
    transition: color .15s ease-in;
    outline: 1px dotted currentColor;

.w1 {
    width: 1rem;

.white-70 {
    color: rgba(255, 255, 255, .7);

.white {
    color: #fff;

.hover-black:hover {
    color: #000;

.hover-black:focus {
    color: #000;

.hover-white:hover {
    color: #fff;

.hover-white:focus {
    color: #fff;

.hover-bg-white:hover {
    background-color: #fff;

.hover-bg-white:focus {
    background-color: #fff;

.pa3 {
    padding: 1rem;

.pv2 {
    padding-top: .5rem;
    padding-bottom: .5rem;

.ph4 {
    padding-left: 2rem;
    padding-right: 2rem;

.mr3 {
    margin-right: 1rem;

.no-underline {
    text-decoration: none;

.f6 {
    font-size: .875rem;

.dim {
    opacity: 1;
    transition: opacity .15s ease-in;

.dim:hover, .dim:focus {
    opacity: .5;
    transition: opacity .15s ease-in;

.dim:active {
    opacity: .8;
    transition: opacity .15s ease-out;

.bg-animate, .bg-animate:hover, .bg-animate:focus {
    transition: background-color .15s ease-in-out;

@media screen and (min-width: 30em) {
    .mr4-ns {
        margin-right: 2rem;

Install via npm Only installs the needed tachyons-modules for this component

npm i --save tachyons-borders tachyons-border-colors tachyons-border-radius tachyons-display tachyons-flexbox tachyons-heights tachyons-links tachyons-widths tachyons-skins tachyons-skins-pseudo tachyons-spacing tachyons-text-decoration tachyons-type-scale tachyons-hovers

Other Components

Article Lists

Title Preview Author Media Flipped Title Preview Author Media


Feature Full Bleed Background Headline Title Text Large Title Text Left Title Top Border Left Title Photo Essay Single Column Large Title Title Highlight Header Cover Title Text Image Title Text


Circle Border Circle Double Ring Rounded Large Rounded Medium Rounded Small Square


Basic Info Single Cta


Basic Previous Next Basic Rounded Extra Small Basic Rounded Small Basic Rounded Basic Centered Icons Pill Grow Pill


Album Centered Album Left Basic Text Card News Card Product Card Profile Card Title Subtitle Profile Card Suggested Profile Text Card


Albums Movies Posters Dim Posters Square Title Subtitle Vinyl

Definition Lists

Inline Simple

Error Pages



Centered Icons Hover Glow Inline Text Simple Large Type Small Print Social Circles Social Simple Text Social Simple Social Text Social Studios


Checkbox List Input Text Label Newsletter Subscription Password Sign In Sign Up Textarea Label


Circle Avatar Title Subtitle Rounded Avatar Title Subtitle Startup Hero


Aspect Ratio 16x9 Aspect Ratio 1x1 Aspect Ratio 3x4 Aspect Ratio 4x3 Aspect Ratio 4x6 Aspect Ratio 5x7 Aspect Ratio 5x8 Aspect Ratio 6x4 Aspect Ratio 7x5 Aspect Ratio 8x5 Aspect Ratio 9x16 Centered Container Five Column Collapse Alternate Five Column Collapse Asymmetrical Five Column Collapse Mixed Five Column Collapse One Five Column Fixed Table Layout Grid Mixed Rows Fixed Table Layout Grid Flag Object Bottom Flag Object Collapse Flag Object Top Flag Object Four Column Collapse Two Collapse One Four Column Collapse Two Four Column Full Bleed 16x9 Full Bleed 4x6 Full Bleed 5x7 Full Bleed 5x8 Full Bleed 6x4 Full Bleed 7x5 Full Bleed 8x5 Full Bleed 9x16 Full Bleed Square Full Screen Centered Title Horizontal Aspect Ratios Three Column Collapse One Three Column Two Column Collapse One Two Column


Animate Background Color Animate Color Dim No Underline Underline On Hover


Block Item Dotted Border Border Spaced Border Tight Contact Phone Follower Notifications Rounded Square Avatar Follower Notifications Hashtags Items Image Title Price Large Links Inline Links Animate Color Links Inline Links With Borders Inline Slab Stat Large Slab Stat Small Slab Stat Title Text


Iphone App


Fixed Semi Transparent Large Title Link List List Overflow Logo Links Inline Collapse Logo Links Inline Logo Titles Links Centered Minimal Sign Up Title Link List


4x4 Mixed Grid Double Portfolio Project Swiss Cover Five Columns


Left Border Pull Quote


Basic Striped Dark


Large Paragraph Narrow Paragraph Paragraph Small Narrow Paragraph Small Paragraph Title Subtitle Centered Wide Paragraph