This is a tagline. For x.
This will change things. And we want you to be involved. This text needs to be longer for testing sake.
Sign up for beta access or learn more about x.
Sign up for beta access or learn more about x.
<article class="mw7 center ph3 ph5-ns tc br2 pv5 bg-washed-green dark-green mb5"> <h1 class="fw6 f3 f2-ns lh-title mt0 mb3"> This is a tagline. For x. </h1> <h2 class="fw2 f4 lh-copy mt0 mb3"> This will change things. And we want you to be involved. This text needs to be longer for testing sake. </h2> <p class="fw1 f5 mt0 mb3"> Sign up for beta access or learn more about x. </p> <div> <a class="f6 br-pill bg-dark-green no-underline washed-green ba b--dark-green grow pv2 ph3 dib mr3" href="#"> Sign Up </a> <a class="f6 br-pill dark-green no-underline ba grow pv2 ph3 dib" href="#"> Learn More </a> </div> </article>
.ba { border-style: solid; border-width: 1px; } .b--dark-green { border-color: #137752; } .br2 { border-radius: .25rem; } .br-pill { border-radius: 9999px; } .dib { display: inline-block; } .fw1 { font-weight: 100; } .fw2 { font-weight: 200; } .fw6 { font-weight: 600; } .lh-title { line-height: 1.25; } .lh-copy { line-height: 1.5; } .mw7 { max-width: 48rem; } .dark-green { color: #137752; } .washed-green { color: #e8fdf5; } .bg-dark-green { background-color: #137752; } .bg-washed-green { background-color: #e8fdf5; } .pv2 { padding-top: .5rem; padding-bottom: .5rem; } .pv5 { padding-top: 4rem; padding-bottom: 4rem; } .ph3 { padding-left: 1rem; padding-right: 1rem; } .mr3 { margin-right: 1rem; } .mb3 { margin-bottom: 1rem; } .mb5 { margin-bottom: 4rem; } .mt0 { margin-top: 0; } .no-underline { text-decoration: none; } .tc { text-align: center; } .f3 { font-size: 1.5rem; } .f4 { font-size: 1.25rem; } .f5 { font-size: 1rem; } .f6 { font-size: .875rem; } .center { margin-right: auto; margin-left: auto; } .grow { -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); transition: transform .25s ease-out; } .grow:hover, .grow:focus { transform: scale(1.05); } .grow:active { transform: scale(.9); } @media screen and (min-width: 30em) { .ph5-ns { padding-left: 4rem; padding-right: 4rem; } .f2-ns { font-size: 2.25rem; } }
npm i --save tachyons-borders tachyons-border-colors tachyons-border-radius tachyons-display tachyons-font-weight tachyons-line-height tachyons-max-widths tachyons-skins tachyons-spacing tachyons-text-decoration tachyons-text-align tachyons-type-scale tachyons-utilities tachyons-hovers