Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="flex flex-col bg-red-200 h-screen justify-center items-center space-y-5">
    
  <!--Main container-->
  <button class="rounded-md border-2 border-black w-[100px] h-[50px]
  transition-all hover:scale-up-center relative
  ">
      <!--Main animation-->
      <div class="bg-sample w-full h-full flex flex-col justify-center peer">
          SUBMIT
      </div>
      <div class="transition-all w-0 peer-hover:w-full h-[2px] bg-black absolute
      top-8 ease-out
      "></div>
  </button>

  
  <!-- Main container -->
  <button class="rounded-md border-2 border-black w-[100px] h-[50px]
  transition-all hover:scale-up-center relative hover:ring-4 hover:ring-offset-2 
  ">
      <!--Main animation-->
      <div class="bg-sample w-full h-full flex flex-col justify-center peer">
          SUBMIT
      </div>
  </button>    
  
  
  <!--Main container-->
  <button class="rounded-md border-2 border-black w-[100px] h-[50px]
  transition-all hover:scale-125 relative hover:animate-pulse hover:text-xl">
      <!--Main animation-->
      <div class="bg-sample w-full h-full flex flex-col justify-center">
      SUBMIT
      </div>
  </button>     

  
  <!-- Main container -->
  <button class="rounded-md border-2 border-black w-[100px] h-[50px] relative group overflow-clip transition-all hover:scale-up-center
  ">
      <!--Main animation-->
      <div class="bg-sample w-full h-full flex flex-col justify-center">
          SUBMIT
      </div>
      <div class="transition-all ease-out bg-red-600 opacity-40 absolute w-[20px] h-[60px] -top-2 -skew-x-12 -translate-x-8 group-hover:translate-x-28">&nbsp</div>
  </button>    

  
  <!-- Main container -->
  <button class="rounded-md border-2 border-black w-[100px] h-[50px] group transition-all hover:scale-up-center overflow-clip
  ">
      <!--Main animation-->
      <div class="bg-sample w-full h-full flex flex-row justify-center items-center
                  ">
        <span class="even:translate-y-10 
                     odd:-translate-y-10 
                     group-hover:even:-translate-y-0 
                     group-hover:odd:translate-y-0
                     transition-all">S</span>
        <span class="even:translate-y-10 
                     odd:-translate-y-10 
                     group-hover:even:-translate-y-0 
                     group-hover:odd:translate-y-0
                     transition-all">U</span>
        <span class="even:translate-y-10 
                     odd:-translate-y-10 
                     group-hover:even:-translate-y-0 
                     group-hover:odd:translate-y-0
                     transition-all">B</span>
        <span class="even:translate-y-10 
                     odd:-translate-y-10 
                     group-hover:even:-translate-y-0 
                     group-hover:odd:translate-y-0
                     transition-all">M</span>
        <span class="even:translate-y-10 
                     odd:-translate-y-10 
                     group-hover:even:-translate-y-0 
                     group-hover:odd:translate-y-0
                     transition-all">I</span>
        <span class="even:translate-y-10 
                     odd:-translate-y-10 
                     group-hover:even:-translate-y-0 
                     group-hover:odd:translate-y-0
                     transition-all">T</span>        
      </div>
  </button>   
  
</div>


<!-- TAILWIND CSS 3.0 SETTINGS -->

<script src="https://cdn.tailwindcss.com"></script>

<script>
  tailwind.config = {
    theme: {
      // preserve the default values for a theme option but also add new values
      extend:{
      // sample
        colors: {
          "sample":"#00ffbb",
        },
      // ADDITION EXTENSIBLE THEMES FOR TAILWINDCSS
// "screens":{},   Your project's responsive breakpoints
// "colors":{},   Your project's color palette
// "columns":{},   Values for the columns property
// "spacing":{},   Your project's spacing scale
// "animation":{},   Values for the animation property
// "aspectRatio":{},   Values for the aspect-ratio property
// "backdropBlur":{},   Values for the backdropBlur plugin
// "backdropBrightness":{},   Values for the backdropBrightness plugin
// "backdropContrast":{},   Values for the backdropContrast plugin
// "backdropGrayscale":{},   Values for the backdropGrayscale plugin
// "backdropHueRotate":{},   Values for the backdropHueRotate plugin
// "backdropInvert":{},   Values for the backdropInvert plugin
// "backdropOpacity":{},   Values for the backdropOpacity plugin
// "backdropSaturate":{},   Values for the backdropSaturate plugin
// "backdropSepia":{},   Values for the backdropSepia plugin
// "backgroundColor":{},   Values for the background-color property
// "backgroundImage":{},   Values for the background-image property
// "backgroundOpacity":{},   Values for the background-opacity property
// "backgroundPosition":{},   Values for the background-position property
// "backgroundSize":{},   Values for the background-size property
// "blur":{},   Values for the blur plugin
// "brightness":{},   Values for the brightness plugin
// "borderColor":{},   Values for the border-color property
// "borderOpacity":{},   Values for the borderOpacity plugin
// "borderRadius":{},   Values for the border-radius property
// "borderWidth":{},   Values for the borderWidth plugin
// "boxShadow":{},   Values for the box-shadow property
// "boxShadowColor":{},   Values for the boxShadowColor plugin
// "caretColor":{},   Values for the caret-color property
// "accentColor":{},   Values for the accent-color property
// "contrast":{},   Values for the contrast plugin
// "container":{},   Configuration for the container plugin
// "content":{},   Values for the content property
// "cursor":{},   Values for the cursor property
// "divideColor":{},   Values for the divideColor plugin
// "divideOpacity":{},   Values for the divideOpacity plugin
// "divideWidth":{},   Values for the divideWidth plugin
// "dropShadow":{},   Values for the dropShadow plugin
// "fill":{},   Values for the fill plugin
// "grayscale":{},   Values for the grayscale plugin
// "hueRotate":{},   Values for the hueRotate plugin
// "invert":{},   Values for the invert plugin
// "flex":{},   Values for the flex property
// "flexBasis":{},   Values for the flex-basis property
// "flexGrow":{},   Values for the flex-grow property
// "flexShrink":{},   Values for the flex-shrink property
// "fontFamily":{},   Values for the font-family property
// "fontSize":{},   Values for the font-size property
// "fontWeight":{},   Values for the font-weight property
// "gap":{},   Values for the gap property
// "gradientColorStops":{},   Values for the gradientColorStops plugin
// "gridAutoColumns":{},   Values for the grid-auto-columns property
// "gridAutoRows":{},   Values for the grid-auto-rows property
// "gridColumn":{},   Values for the grid-column property
// "gridColumnEnd":{},   Values for the grid-column-end property
// "gridColumnStart":{},   Values for the grid-column-start property
// "gridRow":{},   Values for the grid-row property
// "gridRowStart":{},   Values for the grid-row-start property
// "gridRowEnd":{},   Values for the grid-row-end property
// "gridTemplateColumns":{},   Values for the grid-template-columns property
// "gridTemplateRows":{},   Values for the grid-template-rows property
// "height":{},   Values for the height property
// "inset":{},   Values for the top, right, bottom, and left properties
// "keyframes":{},   Keyframe values used in the animation plugin
// "letterSpacing":{},   Values for the letter-spacing property
// "lineHeight":{},   Values for the line-height property
// "listStyleType":{},   Values for the list-style-type property
// "margin":{},   Values for the margin property
// "maxHeight":{},   Values for the max-height property
// "maxWidth":{},   Values for the max-width property
// "minHeight":{},   Values for the min-height property
// "minWidth":{},   Values for the min-width property
// "objectPosition":{},   Values for the object-position property
// "opacity":{},   Values for the opacity property
// "order":{},   Values for the order property
// "padding":{},   Values for the padding property
// "placeholderColor":{},   Values for the placeholderColor plugin
// "placeholderOpacity":{},   Values for the placeholderOpacity plugin
// "outlineColor":{},   Values for the outline-color property
// "outlineOffset":{},   Values for the outline-offset property
// "outlineWidth":{},   Values for the outline-width property
// "ringColor":{},   Values for the ringColor plugin
// "ringOffsetColor":{},   Values for the ringOffsetColor plugin
// "ringOffsetWidth":{},   Values for the ringOffsetWidth plugin
// "ringOpacity":{},   Values for the ringOpacity plugin
// "ringWidth":{},   Values for the ringWidth plugin
// "rotate":{},   Values for the rotate plugin
// "saturate":{},   Values for the saturate plugin
// "scale":{},   Values for the scale plugin
// "scrollMargin":{},   Values for the scroll-margin property
// "scrollPadding":{},   Values for the scroll-padding property
// "sepia":{},   Values for the sepia plugin
// "skew":{},   Values for the skew plugin
// "space":{},   Values for the space plugin
// "stroke":{},   Values for the stroke property
// "strokeWidth":{},   Values for the stroke-width property
// "textColor":{},   Values for the text-color property
// "textDecorationColor":{},   Values for the text-decoration-color property
// "textDecorationThickness":{},   Values for the text-decoration-thickness property
// "textUnderlineOffset":{},   Values for the text-underline-offset property
// "textIndent":{},   Values for the text-indent property
// "textOpacity":{},   Values for the textOpacity plugin
// "transformOrigin":{},   Values for the transform-origin property
// "transitionDelay":{},   Values for the transition-delay property
// "transitionDuration":{},   Values for the transition-duration property
// "transitionProperty":{},   Values for the transition-property property
// "transitionTimingFunction":{},   Values for the transition-timing-function property
// "translate":{},   Values for the translate plugin
// "width":{},   Values for the width property
// "willChange":{},   Values for the will-change property
// "zIndex":{},   Values for the z-index property
      }
    }
  }
</script>

<style type="text/tailwindcss">
/* CUSTOM CSS THAT IS AUTOMATICALLY INTEGRATED TO TAILWIND UPON COMPILING */

  @layer utilities {
    .scale-up-center {
      animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }
    @keyframes scale-up-center {
      0% {
                transform: scale(1);
      }
      100% {
                transform: scale(1.3);
      }
    }
  }
</style>

<!-- FOR PLUGINS -->
<!-- <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script> -->


              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console