Badges

Utiliza estos componentes de badges para resaltar información importante, indicar estados o categorizar elementos. Ofrecemos una amplia variedad de estilos para elegir.

Gradients Badges

Badge Badge Badge Badge Badge Badge Badge Badge

src/index.html

        <div class="max-w-2xl flex flex-row gap-x-2">
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-gray-800 bg-gradient-to-br from-gray-100 via-gray-300 to-gray-500">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-red-800 bg-gradient-to-br from-red-100 via-red-300 to-red-500">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-yellow-800 bg-gradient-to-br from-yellow-100 via-yellow-300 to-yellow-500">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-green-800 bg-gradient-to-br from-green-100 via-green-300 to-green-500">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-blue-800 bg-gradient-to-br from-blue-100 via-blue-300 to-blue-500">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-indigo-800 bg-gradient-to-br from-indigo-100 via-indigo-300 to-indigo-500">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-purple-800 bg-gradient-to-br from-purple-100 via-purple-300 to-purple-500">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-pink-800 bg-gradient-to-br from-pink-100 via-pink-300 to-pink-500">Badge</span>  
</div>
    

Transparent Badges

Badge Badge Badge Badge Badge Badge Badge Badge

src/index.html

        <div class="max-w-2xl flex flex-row gap-x-2">
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-gray-500 ring-2 ring-inset ring-gray-500/80">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-red-500 ring-2 ring-inset ring-red-600/80">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-yellow-500 ring-2 ring-inset ring-yellow-600/80">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-green-500 ring-2 ring-inset ring-green-600/80">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-blue-500 ring-2 ring-inset ring-blue-700/80">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-indigo-500 ring-2 ring-inset ring-indigo-700/80">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-purple-500 ring-2 ring-inset ring-purple-700/80">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-pink-500 ring-2 ring-inset ring-pink-700/80">Badge</span>
</div>
    

Hover Badges

Badge Badge Badge Badge Badge Badge Badge Badge

src/index.html

        <div class="max-w-2xl flex flex-row gap-x-2">
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-gray-100 hover:text-gray-800 hover:bg-gradient-to-br transition from-gray-100 via-gray-300 
    to-gray-500 ring-1 ring-gray-500/50">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-red-100 hover:text-red-800 hover:bg-gradient-to-br transition from-red-100 via-red-300 
    to-red-500 ring-1 ring-red-500/50">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-yellow-100 hover:text-yellow-800 hover:bg-gradient-to-br transition from-yellow-100 via-yellow-300 
    to-yellow-500 ring-1 ring-yellow-500/50">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-green-100 hover:text-green-800 hover:bg-gradient-to-br transition from-green-100 via-green-300 
    to-green-500 ring-1 ring-green-500/50">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-blue-100 hover:text-blue-800 hover:bg-gradient-to-br transition from-blue-100 via-blue-300 
    to-blue-500 ring-1 ring-blue-500/50">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-indigo-100 hover:text-indigo-800 hover:bg-gradient-to-br transition from-indigo-100 via-indigo-300 
    to-indigo-500 ring-1 ring-indigo-500/50">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-purple-100 hover:text-purple-800 hover:bg-gradient-to-br transition from-purple-100 via-purple-300 
    to-purple-500 ring-1 ring-purple-500/50">Badge</span>
    <span class="inline-flex items-center rounded-lg px-2 py-1 text-xs font-semibold text-pink-100 hover:text-pink-800 hover:bg-gradient-to-br transition from-pink-100 via-pink-300 
    to-pink-500 ring-1 ring-pink-500/50">Badge</span>  
</div>
    

With Icon Badges

Badge Badge Badge Badge Badge Badge Badge Badge

src/index.html

        <div class="max-w-2xl flex flex-row gap-x-2">
    <span class="inline-flex gap-x-2 items-center rounded-lg px-1 py-1 text-xs font-semibold text-gray-800 bg-gradient-to-br from-gray-100 via-gray-300 to-gray-500">
    <svg xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-circle"><path 
    stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z" /></svg>
    Badge</span>
    <span class="inline-flex gap-x-2 items-center rounded-lg px-2 py-1 text-xs font-semibold text-red-800 bg-gradient-to-br from-red-100 via-red-300 to-red-500">
    <svg xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-circle"><path 
    stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z" /></svg>
    Badge</span>
    <span class="inline-flex gap-x-2 items-center rounded-lg px-2 py-1 text-xs font-semibold text-yellow-800 bg-gradient-to-br from-yellow-100 via-yellow-300 to-yellow-500">
    <svg xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-circle"><path 
    stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z" /></svg>
    Badge</span>
    <span class="inline-flex gap-x-2 items-center rounded-lg px-2 py-1 text-xs font-semibold text-green-800 bg-gradient-to-br from-green-100 via-green-300 to-green-500">
    <svg xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-circle"><path 
    stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z" /></svg>
    Badge</span>
    <span class="inline-flex gap-x-2 items-center rounded-lg px-2 py-1 text-xs font-semibold text-blue-800 bg-gradient-to-br from-blue-100 via-blue-300 to-blue-500">
    <svg xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-circle"><path 
    stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z" /></svg>
    Badge</span>
    <span class="inline-flex gap-x-2 items-center rounded-lg px-2 py-1 text-xs font-semibold text-indigo-800 bg-gradient-to-br from-indigo-100 via-indigo-300 to-indigo-500">
    <svg xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-circle"><path 
    stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z" /></svg>
    Badge</span>
    <span class="inline-flex gap-x-2 items-center rounded-lg px-2 py-1 text-xs font-semibold text-purple-800 bg-gradient-to-br from-purple-100 via-purple-300 to-purple-500">
    <svg xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-circle"><path 
    stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z" /></svg>
    Badge</span>
    <span class="inline-flex gap-x-2 items-center rounded-lg px-2 py-1 text-xs font-semibold text-pink-800 bg-gradient-to-br from-pink-100 via-pink-300 to-pink-500">
    <svg xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-circle"><path 
    stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z" /></svg>
    Badge</span>  
</div>
    

Rectangle Badges

Badge Badge Badge Badge Badge Badge Badge Badge

src/index.html

        <div class="max-w-2xl flex flex-row gap-x-2">
    <span class="inline-flex items-center bg-gray-50 px-2 py-1 text-xs font-semibold text-gray-700">Badge</span>
    <span class="inline-flex items-center bg-red-50 px-2 py-1 text-xs font-semibold text-red-700">Badge</span>
    <span class="inline-flex items-center bg-yellow-50 px-2 py-1 text-xs font-semibold text-yellow-700">Badge</span>
    <span class="inline-flex items-center bg-green-50 px-2 py-1 text-xs font-semibold text-green-700">Badge</span>
    <span class="inline-flex items-center bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-700">Badge</span>
    <span class="inline-flex items-center bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-700">Badge</span>
    <span class="inline-flex items-center bg-purple-50 px-2 py-1 text-xs font-semibold text-purple-700">Badge</span>
    <span class="inline-flex items-center bg-pink-50 px-2 py-1 text-xs font-semibold text-pink-700">Badge</span>
</div>
    

Languages Badges

Astro Tailwind CSS Python C++ JavaScript HTML 5 CSS

src/index.html

        <div class="w-full grid grid-cols-3 grid-rows-2 md:flex md:flex-row gap-2">
    <span class="inline-flex items-center justify-center text-white gap-x-1 rounded-2xl text-xs font-semibold border border-orange-200 bg-orange-100/30 py-1 px-2"><svg viewBox="0 0 256 366" xmlns="http://www.w3.org/2000/svg" width="256" height="366" preserveAspectRatio="xMidYMid"><path fill="#fff" d="M182.022 9.147c2.982 3.702 4.502 8.697 7.543 18.687L256 246.074a276.467 276.467 0 0 0-79.426-26.891L133.318 73.008a5.63 5.63 0 0 0-10.802.017L79.784 219.11A276.453 276.453 0 0 0 0 246.04L66.76 27.783c3.051-9.972 4.577-14.959 7.559-18.654a24.541 24.541 0 0 1 9.946-7.358C88.67 0 93.885 0 104.314 0h47.683c10.443 0 15.664 0 20.074 1.774a24.545 24.545 0 0 1 9.95 7.373Z"/><path fill="#FF5D01" d="M189.972 256.46c-10.952 9.364-32.812 15.751-57.992 15.751-30.904 0-56.807-9.621-63.68-22.56-2.458 7.415-3.009 15.903-3.009 21.324 0 0-1.619 26.623 16.898 45.14 0-9.615 7.795-17.41 17.41-17.41 16.48 0 16.46 14.378 16.446 26.043l-.001 1.041c0 17.705 10.82 32.883 26.21 39.28a35.685 35.685 0 0 1-3.588-15.647c0-16.886 9.913-23.173 21.435-30.48 9.167-5.814 19.353-12.274 26.372-25.232a47.588 47.588 0 0 0 5.742-22.735c0-5.06-.786-9.938-2.243-14.516Z"/></svg>Astro</span>
    <span class="inline-flex items-center justify-center text-white gap-x-1 rounded-2xl text-xs font-semibold border border-cyan-200 bg-cyan-100/30 py-1 px-2"><svg viewBox="0 0 256 154" width="256" height="154" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><defs><linearGradient x1="-2.778%" y1="32%" x2="100%" y2="67.556%" id="gradient"><stop stop-color="#2298BD" offset="0%"></stop><stop stop-color="#0ED7B5" offset="100%"></stop></linearGradient></defs><path d="M128 0C93.867 0 72.533 17.067 64 51.2 76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0ZM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2 9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8Z" fill="url(#gradient)"></path></svg>Tailwind CSS</span>
    <span class="inline-flex items-center justify-center text-white gap-x-1 rounded-2xl text-xs font-semibold border border-yellow-200 bg-yellow-100/30 py-1 px-2"><svg viewBox="0 0 256 366" xmlns="http://www.w3.org/2000/svg" width="256" height="366" preserveAspectRatio="xMidYMid"><path fill="#fff" d="M182.022 9.147c2.982 3.702 4.502 8.697 7.543 18.687L256 246.074a276.467 276.467 0 0 0-79.426-26.891L133.318 73.008a5.63 5.63 0 0 0-10.802.017L79.784 219.11A276.453 276.453 0 0 0 0 246.04L66.76 27.783c3.051-9.972 4.577-14.959 7.559-18.654a24.541 24.541 0 0 1 9.946-7.358C88.67 0 93.885 0 104.314 0h47.683c10.443 0 15.664 0 20.074 1.774a24.545 24.545 0 0 1 9.95 7.373Z"/><path fill="#FF5D01" d="M189.972 256.46c-10.952 9.364-32.812 15.751-57.992 15.751-30.904 0-56.807-9.621-63.68-22.56-2.458 7.415-3.009 15.903-3.009 21.324 0 0-1.619 26.623 16.898 45.14 0-9.615 7.795-17.41 17.41-17.41 16.48 0 16.46 14.378 16.446 26.043l-.001 1.041c0 17.705 10.82 32.883 26.21 39.28a35.685 35.685 0 0 1-3.588-15.647c0-16.886 9.913-23.173 21.435-30.48 9.167-5.814 19.353-12.274 26.372-25.232a47.588 47.588 0 0 0 5.742-22.735c0-5.06-.786-9.938-2.243-14.516Z"/></svg>Python</span>
    <span class="inline-flex items-center justify-center text-white gap-x-1 rounded-2xl text-xs font-semibold border border-blue-200 bg-blue-100/30 py-1 px-2"><svg xmlns="http://www.w3.org/2000/svg" width="256" height="288" preserveAspectRatio="xMidYMid" viewBox="0 0 256 288"><path fill="#649AD2" d="M255.987 84.59c-.002-4.837-1.037-9.112-3.13-12.781-2.054-3.608-5.133-6.632-9.261-9.023-34.08-19.651-68.195-39.242-102.264-58.913-9.185-5.303-18.09-5.11-27.208.27-13.565 8-81.48 46.91-101.719 58.632C4.071 67.6.015 74.984.013 84.58 0 124.101.013 163.62 0 203.141c0 4.73.993 8.923 2.993 12.537 2.056 3.717 5.177 6.824 9.401 9.269 20.24 11.722 88.164 50.63 101.726 58.631 9.121 5.382 18.027 5.575 27.215.27 34.07-19.672 68.186-39.262 102.272-58.913 4.224-2.444 7.345-5.553 9.401-9.267 1.997-3.614 2.992-7.806 2.992-12.539 0 0 0-79.018-.013-118.539"/><path fill="#004482" d="m128.392 143.476-125.4 72.202c2.057 3.717 5.178 6.824 9.402 9.269 20.24 11.722 88.164 50.63 101.726 58.631 9.121 5.382 18.027 5.575 27.215.27 34.07-19.672 68.186-39.262 102.272-58.913 4.224-2.444 7.345-5.553 9.401-9.267l-124.616-72.192"/><path fill="#1A4674" d="M91.25 164.863c7.297 12.738 21.014 21.33 36.75 21.33 15.833 0 29.628-8.7 36.888-21.576l-36.496-21.141-37.142 21.387"/><path fill="#01589C" d="M255.987 84.59c-.002-4.837-1.037-9.112-3.13-12.781l-124.465 71.667 124.616 72.192c1.997-3.614 2.99-7.806 2.992-12.539 0 0 0-79.018-.013-118.539"/><path fill="#FFF" d="M249.135 148.636h-9.738v9.74h-9.74v-9.74h-9.737V138.9h9.737v-9.738h9.74v9.738h9.738v9.737ZM128 58.847c31.135 0 58.358 16.74 73.17 41.709l.444.759-37.001 21.307c-7.333-12.609-20.978-21.094-36.613-21.094-23.38 0-42.333 18.953-42.333 42.332a42.13 42.13 0 0 0 5.583 21.003c7.297 12.738 21.014 21.33 36.75 21.33 15.659 0 29.325-8.51 36.647-21.153l.241-.423 36.947 21.406c-14.65 25.597-42.228 42.851-73.835 42.851-31.549 0-59.084-17.185-73.754-42.707-7.162-12.459-11.26-26.904-11.26-42.307 0-46.95 38.061-85.013 85.014-85.013Zm75.865 70.314v9.738h9.737v9.737h-9.737v9.74h-9.738v-9.74h-9.738V138.9h9.738v-9.738h9.738Z"/></svg>C++</span>
    <span class="inline-flex items-center justify-center text-white gap-x-1 rounded-2xl text-xs font-semibold border border-yellow-200 bg-yellow-200/30 py-1 px-2"><svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 1052 1052"><path fill="#f0db4f" d="M0 0h1052v1052H0z"/><path d="M965.9 801.1c-7.7-48-39-88.3-131.7-125.9-32.2-14.8-68.1-25.399-78.8-49.8-3.8-14.2-4.3-22.2-1.9-30.8 6.9-27.9 40.2-36.6 66.6-28.6 17 5.7 33.1 18.801 42.8 39.7 45.4-29.399 45.3-29.2 77-49.399-11.6-18-17.8-26.301-25.4-34-27.3-30.5-64.5-46.2-124-45-10.3 1.3-20.699 2.699-31 4-29.699 7.5-58 23.1-74.6 44-49.8 56.5-35.6 155.399 25 196.1 59.7 44.8 147.4 55 158.6 96.9 10.9 51.3-37.699 67.899-86 62-35.6-7.4-55.399-25.5-76.8-58.4-39.399 22.8-39.399 22.8-79.899 46.1 9.6 21 19.699 30.5 35.8 48.7 76.2 77.3 266.899 73.5 301.1-43.5 1.399-4.001 10.6-30.801 3.199-72.101zm-394-317.6h-98.4c0 85-.399 169.4-.399 254.4 0 54.1 2.8 103.7-6 118.9-14.4 29.899-51.7 26.2-68.7 20.399-17.3-8.5-26.1-20.6-36.3-37.699-2.8-4.9-4.9-8.7-5.601-9-26.699 16.3-53.3 32.699-80 49 13.301 27.3 32.9 51 58 66.399 37.5 22.5 87.9 29.4 140.601 17.3 34.3-10 63.899-30.699 79.399-62.199 22.4-41.3 17.6-91.3 17.4-146.6.5-90.2 0-180.4 0-270.9z" fill="#323330"/></svg>JavaScript</span>
    <span class="inline-flex items-center justify-center text-white gap-x-1 rounded-2xl text-xs font-semibold border border-orange-200 bg-orange-200/30 py-1 px-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 520"><path fill="#e34f26" d="M41 460L0 0h451l-41 460-185 52" /><path fill="#ef652a" d="M226 472l149-41 35-394H226" /><path fill="#ecedee" d="M226 208h-75l-5-58h80V94H84l15 171h127zm0 147l-64-17-4-45h-56l7 89 117 32z"/><path fill="#fff" d="M226 265h69l-7 73-62 17v59l115-32 16-174H226zm0-171v56h136l5-56z"/></svg>HTML 5</span>
    <span class="inline-flex items-center justify-center text-white gap-x-1 rounded-2xl text-xs font-semibold border border-purple-200 bg-purple-100/30 py-1 px-2"><svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" aria-labelledby="css-logo-title css-logo-description" viewBox="0 0 1000 1000"><path fill="#639" d="M0 0h840a160 160 0 0 1 160 160v680a160 160 0 0 1-160 160H160A160 160 0 0 1 0 840V0Z"/><path fill="#fff" d="M816.54 919.9c-32.39 0-57.16-9.42-74.5-28.35-17.15-19.03-26.08-46.18-26.88-81.64h69.8c.4 31.36 11.42 47.08 33.08 47.08 11.04 0 18.86-3.5 23.37-10.42 4.41-6.9 6.72-17.93 6.72-33.05 0-12.02-3.01-22.04-8.83-29.95a73.2 73.2 0 0 0-29.48-21.14L783.95 750c-23.06-11.02-39.81-24.04-50.14-39.27-10.03-15.13-15.04-36.36-15.04-63.5 0-30.36 8.83-55 26.37-73.94 18.05-18.93 42.62-28.34 74-28.34 30.3 0 53.76 9.31 70.3 27.84 16.85 18.64 25.67 45.28 26.38 80.14h-67.19c.4-11.4-1.9-22.72-6.72-33.06-3.8-7.6-11.23-11.41-22.26-11.41-19.65 0-29.48 11.71-29.48 35.05 0 11.83 2.4 21.04 7.22 28.05A65.18 65.18 0 0 0 822.76 689l24.77 10.92c25.57 11.72 44.02 26.05 55.35 43.38 11.43 17.23 17.05 40.27 17.05 69.12 0 34.56-9.03 61.1-27.38 79.63-18.25 18.53-43.62 27.85-76 27.85Zm-225.42 0c-32.4 0-57.16-9.42-74.51-28.35-17.15-19.03-26.07-46.18-26.87-81.64h69.79c.4 31.36 11.43 47.08 33.1 47.08 11.02 0 18.84-3.5 23.25-10.42 4.52-6.9 6.72-17.93 6.72-33.05 0-12.02-2.9-22.04-8.72-29.95a73.2 73.2 0 0 0-29.48-21.14L558.53 750c-23.07-11.02-39.81-24.04-50.14-39.27-10.03-15.13-15.04-36.36-15.04-63.5 0-30.36 8.82-55 26.37-73.94 18.05-18.93 42.62-28.34 74-28.34 30.29 0 53.75 9.31 70.2 27.84 17.05 18.64 25.77 45.28 26.47 80.14h-67.18c.4-11.4-1.9-22.72-6.72-33.06-3.81-7.6-11.23-11.41-22.26-11.41-19.66 0-29.49 11.71-29.49 35.05 0 11.83 2.41 21.04 7.22 28.05A65.18 65.18 0 0 0 597.33 689l24.77 10.92c25.57 11.72 44.02 26.05 55.36 43.38 11.33 17.23 17.04 40.27 17.04 69.12 0 34.56-9.12 61.1-27.37 79.63-18.25 18.53-43.62 27.85-76.01 27.85Zm-234.75 0c-31.7 0-56.86-8.62-75.51-25.85-18.65-17.12-27.88-42.87-27.88-76.93V648.83c0-33.85 9.83-59.5 29.48-77.13 19.96-17.43 46.13-26.24 78.52-26.24 31.39 0 56.15 9.01 74.5 26.84 18.56 17.93 27.88 44.58 27.88 80.14v13.32h-73.9v-12.92c0-13.72-3.01-23.84-8.83-30.45a26.46 26.46 0 0 0-21.66-10.32c-12.03 0-20.55 4.1-25.37 12.42a79.04 79.04 0 0 0-6.72 36.66v146.26c0 30.55 10.74 46.08 32.1 46.38 10.02 0 17.54-3.61 22.76-10.82a51.74 51.74 0 0 0 7.72-30.46V801.6h73.9v11.42c0 23.74-4.61 43.57-13.94 59.4a88.8 88.8 0 0 1-38.2 35.66 121.46 121.46 0 0 1-54.85 11.82Z"/></svg>CSS</span>
</div>