Cockatoo

This tailwind example is contributed by Lokesh H, on 12-Aug-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Content loader, Shimmer, Ghost element, Content placeholder

Skeleton loader Other

Author Lokesh H

Tailwind v3.4 72 2

Fork Fullscreen

<div class="loader">
  <svg
    class="legl"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    width="20.69332"
    height="68.19944"
    viewBox="0,0,20.69332,68.19944"
  >
    <g transform="translate(-201.44063,-235.75466)">
      <g stroke-miterlimit="10">
        <path d="" fill="#ffffff" stroke="none" stroke-width="0.5"></path>
        <path
          d=""
          fill-opacity="0.26667"
          fill="#97affd"
          stroke-opacity="0.48627"
          stroke="#ffffff"
          stroke-width="0"
        ></path>
        <path
          d="M218.11971,301.20087c-2.20708,1.73229 -4.41416,0 -4.41416,0l-1.43017,-1.1437c-1.42954,-1.40829 -3.04351,-2.54728 -4.56954,-3.87927c-0.95183,-0.8308 -2.29837,-1.49883 -2.7652,-2.55433c-0.42378,-0.95815 0.14432,-2.02654 0.29355,-3.03399c0.41251,-2.78499 1.82164,-5.43386 2.41472,-8.22683c1.25895,-4.44509 2.73863,-8.98683 3.15318,-13.54796c0.22615,-2.4883 -0.21672,-5.0155 -0.00278,-7.50605c0.30636,-3.56649 1.24602,-7.10406 1.59992,-10.6738c0.29105,-2.93579 -0.00785,-5.9806 -0.00785,-8.93046c0,0 0,-2.44982 3.12129,-2.44982c3.12129,0 3.12129,2.44982 3.12129,2.44982c0,3.06839 0.28868,6.22201 -0.00786,9.27779c-0.34637,3.56935 -1.30115,7.10906 -1.59992,10.6738c-0.2103,2.50918 0.22586,5.05326 -0.00278,7.56284c-0.43159,4.7371 -1.94029,9.46317 -3.24651,14.07835c-0.47439,2.23403 -1.29927,4.31705 -2.05805,6.47156c-0.18628,0.52896 -0.1402,1.0974 -0.327,1.62624c-0.09463,0.26791 -0.64731,0.47816 -0.50641,0.73323c0.19122,0.34617 0.86423,0.3445 1.2346,0.58502c1.88637,1.22503 3.50777,2.79494 5.03,4.28305l0.96971,0.73991c0,0 2.20708,1.73229 0,3.46457z"
          fill="none"
          stroke="#191e2e"
          stroke-width="7"
        ></path>
      </g>
    </g>
  </svg>

<svg
    class="legr"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    width="41.02537"
    height="64.85502"
    viewBox="0,0,41.02537,64.85502"
  >
    <g transform="translate(-241.54137,-218.44347)">
      <g stroke-miterlimit="10">
        <path
          d="M279.06674,279.42662c-2.27967,1.98991 -6.08116,0.58804 -6.08116,0.58804l-2.47264,-0.92915c-2.58799,-1.18826 -5.31176,-2.08831 -7.99917,-3.18902c-1.67622,-0.68654 -3.82471,-1.16116 -4.93147,-2.13229c-1.00468,-0.88156 -0.69132,-2.00318 -0.92827,-3.00935c-0.65501,-2.78142 0.12275,-5.56236 -0.287,-8.37565c-0.2181,-4.51941 -0.17458,-9.16283 -1.60696,-13.68334c-0.78143,-2.46614 -2.50162,-4.88125 -3.30086,-7.34796c-1.14452,-3.53236 -1.40387,-7.12078 -2.48433,-10.66266c-0.88858,-2.91287 -2.63779,-5.85389 -3.93351,-8.74177c0,0 -1.07608,-2.39835 3.22395,-2.81415c4.30003,-0.41581 2.41605,1.98254 2.41605,1.98254c1.34779,3.00392 3.13072,6.05282 4.06444,9.0839c1.09065,3.54049 1.33011,7.13302 2.48433,10.66266c0.81245,2.48448 2.5308,4.917 3.31813,7.40431c1.48619,4.69506 1.48366,9.52281 1.71137,14.21503c0.32776,2.25028 0.10631,4.39942 0.00736,6.60975c-0.02429,0.54266 0.28888,1.09302 0.26382,1.63563c-0.01269,0.27488 -0.68173,0.55435 -0.37558,0.78529c0.41549,0.31342 1.34191,0.22213 1.95781,0.40826c3.13684,0.94799 6.06014,2.26892 8.81088,3.52298l1.66093,0.59519c0,0 6.76155,1.40187 4.48187,3.39177z"
          fill="none"
          stroke="#000000"
          stroke-width="7"
        ></path>
        <path d="" fill="#ffffff" stroke="none" stroke-width="0.5"></path>
        <path
          d=""
          fill-opacity="0.26667"
          fill="#97affd"
          stroke-opacity="0.48627"
          stroke="#ffffff"
          stroke-width="0"
        ></path>
      </g>
    </g>
  </svg>

<div class="bod">
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="144.10576"
      height="144.91623"
      viewBox="0,0,144.10576,144.91623"
    >
      <g transform="translate(-164.41679,-112.94712)">
        <g stroke-miterlimit="10">
          <path
            d="M166.9168,184.02633c0,-36.49454 35.0206,-66.07921 72.05288,-66.07921c37.03228,0 67.05288,29.58467 67.05288,66.07921c0,6.94489 -1.08716,13.63956 -3.10292,19.92772c-2.71464,8.46831 -7.1134,16.19939 -12.809,22.81158c-2.31017,2.68194 -7.54471,12.91599 -7.54471,12.91599c0,0 -5.46714,-1.18309 -8.44434,0.6266c-3.86867,2.35159 -10.95356,10.86714 -10.95356,10.86714c0,0 -6.96906,-3.20396 -9.87477,-2.58085c-2.64748,0.56773 -6.72538,5.77072 -6.72538,5.77072c0,0 -5.5023,-4.25969 -7.5982,-4.25969c-3.08622,0 -9.09924,3.48259 -9.09924,3.48259c0,0 -6.0782,-5.11244 -9.00348,-5.91884c-4.26461,-1.17561 -12.23343,0.75049 -12.23343,0.75049c0,0 -5.18164,-8.26065 -7.60688,-9.90388c-3.50443,-2.37445 -8.8271,-3.95414 -8.8271,-3.95414c0,0 -5.33472,-8.81718 -7.27019,-11.40895c-4.81099,-6.44239 -13.46422,-9.83437 -15.65729,-17.76175c-1.53558,-5.55073 -2.35527,-21.36472 -2.35527,-21.36472z"
            fill="#191e2e"
            stroke="#000000"
            stroke-width="5"
            stroke-linecap="butt"
          ></path>
          <path
            d="M167.94713,180c0,-37.03228 35.0206,-67.05288 72.05288,-67.05288c37.03228,0 67.05288,30.0206 67.05288,67.05288c0,7.04722 -1.08716,13.84053 -3.10292,20.22135c-2.71464,8.59309 -7.1134,16.43809 -12.809,23.14771c-2.31017,2.72146 -7.54471,13.1063 -7.54471,13.1063c0,0 -5.46714,-1.20052 -8.44434,0.63584c-3.86867,2.38624 -10.95356,11.02726 -10.95356,11.02726c0,0 -6.96906,-3.25117 -9.87477,-2.61888c-2.64748,0.5761 -6.72538,5.85575 -6.72538,5.85575c0,0 -5.5023,-4.32246 -7.5982,-4.32246c-3.08622,0 -9.09924,3.5339 -9.09924,3.5339c0,0 -6.0782,-5.18777 -9.00348,-6.00605c-4.26461,-1.19293 -12.23343,0.76155 -12.23343,0.76155c0,0 -5.18164,-8.38236 -7.60688,-10.04981c-3.50443,-2.40943 -8.8271,-4.0124 -8.8271,-4.0124c0,0 -5.33472,-8.9471 -7.27019,-11.57706c-4.81099,-6.53732 -13.46422,-9.97928 -15.65729,-18.02347c-1.53558,-5.63252 -2.35527,-21.67953 -2.35527,-21.67953z"
            fill="#191e2e"
            stroke="none"
            stroke-width="0"
            stroke-linecap="butt"
          ></path>
          <path
            d=""
            fill="#ffffff"
            stroke="none"
            stroke-width="0.5"
            stroke-linecap="butt"
          ></path>
          <path
            d=""
            fill-opacity="0.26667"
            fill="#97affd"
            stroke-opacity="0.48627"
            stroke="#ffffff"
            stroke-width="0"
            stroke-linecap="butt"
          ></path>
          <path
            d="M216.22445,188.06994c0,0 1.02834,11.73245 -3.62335,21.11235c-4.65169,9.3799 -13.06183,10.03776 -13.06183,10.03776c0,0 7.0703,-3.03121 10.89231,-10.7381c4.34839,-8.76831 5.79288,-20.41201 5.79288,-20.41201z"
            fill="none"
            stroke="#2f3a50"
            stroke-width="3"
            stroke-linecap="round"
          ></path>
        </g>
      </g>
    </svg>

<svg
      class="head"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="115.68559"
      height="88.29441"
      viewBox="0,0,115.68559,88.29441"
    >
      <g transform="translate(-191.87889,-75.62023)">
        <g stroke-miterlimit="10">
          <path
            d=""
            fill="#ffffff"
            stroke="none"
            stroke-width="0.5"
            stroke-linecap="butt"
          ></path>
          <path
            d="M195.12889,128.77752c0,-26.96048 21.33334,-48.81626 47.64934,-48.81626c26.316,0 47.64935,21.85578 47.64935,48.81626c0,0.60102 -9.22352,20.49284 -9.22352,20.49284l-7.75885,0.35623l-7.59417,6.15039l-8.64295,-1.74822l-11.70703,6.06119l-6.38599,-4.79382l-6.45999,2.36133l-7.01451,-7.38888l-8.11916,1.29382l-6.19237,-6.07265l-7.6263,-1.37795l-4.19835,-7.87062l-4.24236,-4.16907c0,0 -0.13314,-2.0999 -0.13314,-3.29458z"
            fill="none"
            stroke="#2f3a50"
            stroke-width="6"
            stroke-linecap="butt"
          ></path>
          <path
            d="M195.31785,124.43649c0,-26.96048 21.33334,-48.81626 47.64934,-48.81626c26.316,0 47.64935,21.85578 47.64935,48.81626c0,1.03481 -0.08666,2.8866 -0.08666,2.8866c0,0 16.8538,15.99287 16.21847,17.23929c-0.66726,1.30905 -23.05667,-4.14265 -23.05667,-4.14265l-2.29866,4.5096l-7.75885,0.35623l-7.59417,6.15039l-8.64295,-1.74822l-11.70703,6.06119l-6.38599,-4.79382l-6.45999,2.36133l-7.01451,-7.38888l-8.11916,1.29382l-6.19237,-6.07265l-7.6263,-1.37795l-4.19835,-7.87062l-4.24236,-4.16907c0,0 -0.13314,-2.0999 -0.13314,-3.29458z"
            fill="#191e2e"
            stroke-opacity="0.48627"
            stroke="#ffffff"
            stroke-width="0"
            stroke-linecap="butt"
          ></path>
          <path
            d="M271.10348,122.46768l10.06374,-3.28166l24.06547,24.28424"
            fill="none"
            stroke="#2f3a50"
            stroke-width="6"
            stroke-linecap="round"
          ></path>
          <path
            d="M306.56448,144.85764l-41.62024,-8.16845l2.44004,-7.87698"
            fill="none"
            stroke="#000000"
            stroke-width="3.5"
            stroke-linecap="round"
          ></path>
          <path
            d="M276.02738,115.72434c-0.66448,-4.64715 2.56411,-8.95308 7.21127,-9.61756c4.64715,-0.66448 8.95309,2.56411 9.61757,7.21126c0.46467,3.24972 -1.94776,8.02206 -5.96624,9.09336c-2.11289,-1.73012 -5.08673,-5.03426 -5.08673,-5.03426c0,0 -4.12095,1.16329 -4.60481,1.54229c-0.16433,-0.04891 -0.62732,-0.38126 -0.72803,-0.61269c-0.30602,-0.70328 -0.36302,-2.02286 -0.44303,-2.58239z"
            fill="#ffffff"
            stroke="none"
            stroke-width="0.5"
            stroke-linecap="butt"
          ></path>
          <path
            d="M242.49281,125.6424c0,-4.69442 3.80558,-8.5 8.5,-8.5c4.69442,0 8.5,3.80558 8.5,8.5c0,4.69442 -3.80558,8.5 -8.5,8.5c-4.69442,0 -8.5,-3.80558 -8.5,-8.5z"
            fill="#ffffff"
            stroke="none"
            stroke-width="0.5"
            stroke-linecap="butt"
          ></path>
          <path
            d=""
            fill-opacity="0.26667"
            fill="#97affd"
            stroke-opacity="0.48627"
            stroke="#ffffff"
            stroke-width="0"
            stroke-linecap="butt"
          ></path>
        </g>
      </g>
    </svg>
  </div>

<svg
    id="gnd"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    width="475"
    height="530"
    viewBox="0,0,163.40011,85.20095"
  >
    <g transform="translate(-176.25,-207.64957)">
      <g
        stroke="#000000"
        stroke-width="2.5"
        stroke-linecap="round"
        stroke-miterlimit="10"
      >
        <path
          d="M295.5,273.1829c0,0 -57.38915,6.69521 -76.94095,-9.01465c-13.65063,-10.50609 15.70098,-20.69467 -2.5451,-19.94465c-30.31027,2.05753 -38.51396,-26.84135 -38.51396,-26.84135c0,0 6.50084,13.30023 18.93224,19.17888c9.53286,4.50796 26.23632,-1.02541 32.09529,4.95137c3.62417,3.69704 2.8012,6.33005 0.66517,8.49452c-3.79415,3.84467 -11.7312,6.21103 -6.24682,10.43645c22.01082,16.95812 72.55412,12.73944 72.55412,12.73944z"
          fill="#000000"
        ></path>
        <path
          d="M338.92138,217.76285c0,0 -17.49626,12.55408 -45.36424,10.00353c-8.39872,-0.76867 -17.29557,-6.23066 -17.29557,-6.23066c0,0 3.06461,-2.23972 15.41857,0.72484c26.30467,6.31228 47.24124,-4.49771 47.24124,-4.49771z"
          fill="#000000"
        ></path>
        <path
          d="M209.14443,223.00182l1.34223,15.4356l-10.0667,-15.4356"
          fill="none"
        ></path>
        <path
          d="M198.20391,230.41806l12.95386,7.34824l6.71113,-12.08004"
          fill="none"
        ></path>
        <path d="M211.19621,238.53825l8.5262,-6.09014" fill="none"></path>
        <path
          d="M317.57068,215.80173l5.27812,6.49615l0.40601,-13.39831"
          fill="none"
        ></path>
        <path d="M323.66082,222.70389l6.09014,-9.33822" fill="none"></path>
      </g>
    </g>
  </svg>
</div>

Related Examples

Payment success page example

Anonymous

1 month ago

150
htmlcss3

Anonymous

1 year ago

1k
Image - Figure with figcaption design

Maxim

1 year ago

1.4k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Ameth Galarcio

1 year ago

2.9k
simple responsive blog layout with sidebar

Isabella Kowalski

3 years ago

10.4k
Sticky fullpage pages / slides

Hasan AlDoy (McDoy)

1 year ago

1.9k
htmlcss1

Anonymous

1 year ago

888
Password Generator
This is a simple and responsive Password Generator built with HTML, Vanilla JavaScript, and Tailwind CSS. It allows users to create secure passwords by selecting custom options such as length, uppercase letters, lowercase letters, numbers, and symbols. Ideal for developers or users looking for a fast and customizable password tool.

SAURAV SINGH

1 year ago

1.4k
Creative Bento Gallery
A modern bento-style gallery combining differently sized image cards in a structured and visually engaging layout.

JUGENDRA GANGWAR

2 months ago

300
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

nejaa badr

1 year ago

3.6k
Hacker terminal #fake
hacker terminal tailwind css

QQ-VVN

1 year ago

1.8k
Resizable container
Resizable container

Ganesh Salunke

8 months ago

514

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.