A
Anonymous

Header - Copy this React, Tailwind Component to your project

.jqifade { position:absolute; background color:#777 } iframe.jqifade { display:block; z index: 1 } div.jqi { width:400px; max width:90%; font family:Verdana,Geneva,Arial,Helvetica,sans serif; position:absolute; background color:#fff; font size:11px; text align:left; border:solid 1px #eee; border radius:6px; moz border radius:6px; webkit border radius:6px; padding:7px } div.jqi .jqicontainer { } div.jqi .jqiclose { position:absolute; top:4px; right: 2px; width:18px; cursor:default; color:#bbb; font weight:bold } div.jqi .jqistate { background color:#fff } div.jqi .jqititle { padding:5px 10px; font size:16px; line height:20px; border bottom:solid 1px #eee } div.jqi .jqimessage { padding:10px; line height:20px; color:#444; overflow:auto } div.jqi .jqibuttonshide { display:none } div.jqi .jqibuttons { text align:right; margin:0 7px 7px 7px; border top:solid 1px #e4e4e4; background color:#f4f4f4; border radius:0 0 6px 6px; moz border radius:0 0 6px 6px; webkit border radius:0 0 6px 6px } div.jqi .jqibuttons button { margin:0; padding:15px 20px; background color:transparent; font weight:normal; border:none; border left:solid 1px #e4e4e4; color:#777; font weight:bold; font size:12px } div.jqi .jqibuttons button.jqidefaultbutton { color:#489afe } div.jqi .jqibuttons button:hover, div.jqi .jqibuttons button:focus { color:#287ade; outline:none } div.jqi .jqibuttons button[disabled] { color:#aaa } .jqiwarning .jqi .jqibuttons { background color:#b95656 } div.jqi .jqiparentstate::after { background color:#777; opacity:0.6; filter:alpha(opacity=60); content:''; position:absolute; top:0; left:0; bottom:0; right:0; border radius:6px; moz border radius:6px; webkit border radius:6px } div.jqi .jqisubstate { position:absolute; top:0; left:20%; width:60%; padding:7px; border:solid 1px #eee; border top:none; border radius:0 0 6px 6px; moz border radius:0 0 6px 6px; webkit border radius:0 0 6px 6px } div.jqi .jqisubstate .jqibuttons button { padding:10px 18px } .jqi .jqiarrow { position:absolute; height:0; width:0; line height:0; font size:0; border:solid 10px transparent } .jqi .jqiarrowtl { left:10px; top: 20px; border bottom color:#fff } .jqi .jqiarrowtc { left:50%; top: 20px; border bottom color:#fff; margin left: 10px } .jqi .jqiarrowtr { right:10px; top: 20px; border bottom color:#fff } .jqi .jqiarrowbl { left:10px; bottom: 20px; border top color:#fff } .jqi .jqiarrowbc { left:50%; bottom: 20px; border top color:#fff; margin left: 10px } .jqi .jqiarrowbr { right:10px; bottom: 20px; border top color:#fff } .jqi .jqiarrowlt { left: 20px; top:10px; border right color:#fff } .jqi .jqiarrowlm { left: 20px; top:50%; border right color:#fff; margin top: 10px } .jqi .jqiarrowlb { left: 20px; bottom:10px; border right color:#fff } .jqi .jqiarrowrt { right: 20px; top:10px; border left color:#fff } .jqi .jqiarrowrm { right: 20px; top:50%; border left color:#fff; margin top: 10px } .jqi .jqiarrowrb { right: 20px; bottom:10px; border left color:#fff }

Prompt
Component Preview

About

Header - Stylish, responsive design with adjustable padding, custom buttons, and clear text alignment. Built with React and Tailwind. Download code free!

Share

Last updated 1 month ago