Company icons grid

responsive company icons showcase grid

This tailwind example is contributed by Amit Pachange, on 21-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Logo cloud

Author Amit Pachange

Tailwind v3.4 12.6k 17

Fork Fullscreen

<div class="flex justify-center flex-wrap gap-5 lg:inline-grid lg:grid-cols-4 xl:grid-cols-5 p-6">
    <div class="bg-white rounded-lg shadow w-18 h-18 flex justify-center items-center">
        <svg viewBox="0 0 37 38" class="h-10" xmlns="http://www.w3.org/2000/svg">
            <g fill-rule="nonzero" fill="none">
                <path
                    d="M31.821 30.764C16.797 37.914 7.473 31.932 1.505 28.3c-.37-.23-.997.053-.453.679 1.989 2.41 8.505 8.222 17.011 8.222 8.512 0 13.576-4.644 14.21-5.455.628-.803.184-1.246-.452-.98z"
                    fill="#F90"></path>
                <path
                    d="M36.04 28.434c-.403-.525-2.453-.623-3.743-.465-1.292.154-3.231.944-3.062 1.418.086.178.263.098 1.15.018.89-.089 3.383-.403 3.903.276.522.684-.795 3.941-1.036 4.467-.232.525.09.66.526.31.43-.35 1.21-1.255 1.733-2.537.52-1.289.836-3.087.53-3.487z"
                    fill="#F90"></path>
                <path
                    d="M26.575 27.912c-.318.285-.778.305-1.137.115-1.599-1.327-1.883-1.944-2.764-3.21-2.641 2.696-4.51 3.501-7.938 3.501-4.05 0-7.206-2.499-7.206-7.504 0-3.908 2.12-6.57 5.134-7.87 2.614-1.152 6.265-1.355 9.055-1.673v-.623c0-1.145.088-2.5-.582-3.488-.59-.887-1.714-1.253-2.703-1.253-1.835 0-3.474.941-3.874 2.892-.081.433-.4.86-.833.88l-4.673-.5c-.393-.089-.826-.407-.718-1.01C9.413 2.507 14.526.8 19.105.8c2.343 0 5.404.623 7.254 2.398 2.343 2.187 2.12 5.106 2.12 8.283v7.504c0 2.256.934 3.245 1.815 4.464.311.433.379.955-.014 1.28-.982.82-2.73 2.343-3.691 3.197l-.014-.014"
                    fill="#000"></path>
                <path
                    d="M21.72 16.175c0 1.876.047 3.44-.902 5.106-.765 1.355-1.977 2.188-3.332 2.188-1.849 0-2.926-1.409-2.926-3.488 0-4.104 3.678-4.85 7.16-4.85v1.044z"
                    fill="#FFF"></path>
            </g>
        </svg>
    </div>
    <div class="bg-white rounded-lg shadow w-18 h-18 flex justify-center items-center">
        <svg viewBox="0 0 48 19" class="w-12" xmlns="http://www.w3.org/2000/svg">
            <g fill-rule="nonzero" fill="none">
                <path
                    d="M6.674 4C3.306 4 .5 5.39.5 9.585.5 12.907 2.387 15 6.76 15c5.15 0 5.48-3.3 5.48-3.3H9.744s-.535 1.777-3.136 1.777c-2.119 0-3.642-1.393-3.642-3.344H12.5V8.908C12.5 6.977 11.24 4 6.674 4zm-.087 1.565c2.017 0 3.391 1.203 3.391 3.004H3.022c0-1.913 1.794-3.004 3.565-3.004z"
                    fill="#E53238"></path>
                <path
                    d="M12.552 0v12.875c0 .73-.052 1.757-.052 1.757h2.286s.082-.737.082-1.41c0 0 1.13 1.778 4.201 1.778 3.234 0 5.431-2.26 5.431-5.498 0-3.012-2.018-5.434-5.426-5.434-3.191 0-4.183 1.734-4.183 1.734V0h-2.34zm5.932 5.66c2.196 0 3.593 1.641 3.593 3.842 0 2.361-1.613 3.905-3.577 3.905-2.344 0-3.609-1.842-3.609-3.884 0-1.902 1.135-3.863 3.593-3.863z"
                    fill="#0064D2"></path>
                <path
                    d="M30.417 4C25.56 4 25.25 6.685 25.25 7.114h2.417s.126-1.568 2.583-1.568c1.596 0 2.833.738 2.833 2.157v.505H30.25c-3.761 0-5.75 1.11-5.75 3.366 0 2.219 1.837 3.426 4.32 3.426 3.384 0 4.474-1.888 4.474-1.888 0 .75.058 1.49.058 1.49H35.5s-.083-.916-.083-1.503V8.026c0-3.326-2.657-4.026-5-4.026zm2.666 5.722v.673c0 .878-.536 3.061-3.695 3.061-1.73 0-2.471-.871-2.471-1.882 0-1.84 2.497-1.852 6.166-1.852z"
                    fill="#F5AF02"></path>
                <path fill="#86B817" d="M34.5 5h2.724l3.909 7.864L45.033 5H47.5l-7.104 14h-2.588l2.05-3.903z"></path>
            </g>
        </svg>
    </div>
    <div class="bg-white rounded-lg shadow w-18 h-18 flex justify-center items-center">
        <svg viewBox=" 0 0 46 22" class="w-12" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M5.491 1.625v6.008s2.117 0 3.25-.086c.891-.156 1.055-.242 1.22-1.133l.327-1.305h.97l-.165 2.852.086 2.922h-.977L9.96 9.742c-.242-.812-.57-.977-1.219-1.055-.812-.086-3.25-.086-3.25-.086v5.039c0 .969.492 1.383 1.625 1.383h3.414c1.055 0 2.11-.086 2.766-1.625l.883-1.953H15c-.086.406-.492 3.984-.57 4.789 0 0-3.086-.078-4.383-.078H4.194l-3.492.078v-.883l1.133-.25c.82-.164 1.062-.406 1.062-1.055 0 0 .086-2.195.086-5.852 0-3.648-.086-5.844-.086-5.844 0-.727-.242-.891-1.062-1.055l-1.133-.24V.164l3.414.07h6.5C11.913.234 14.1 0 14.1 0s-.078 1.375-.164 4.625h-.89l-.329-1.141c-.32-1.461-.805-2.188-1.703-2.188H5.905c-.414.001-.414.079-.414.329zm13.156.641h.977V5.68l3.336-.164-.164 1.547-3.25-.25v6.016c0 1.703.57 2.359 1.547 2.359.883 0 1.54-.492 1.781-.898l.484.57c-.484 1.133-1.859 1.703-3.164 1.703-1.617 0-2.93-.969-2.93-2.836V6.898h-1.938v-.812c1.626-.164 2.837-1.141 3.321-3.82zm6.992 10.476.648 1.547c.242.648.812 1.305 2.11 1.305 1.382 0 1.952-.734 1.952-1.625 0-2.766-5.445-1.953-5.445-5.688 0-2.109 1.703-3.094 3.898-3.094.977 0 2.438.164 3.172.492-.164.812-.25 1.867-.25 2.68l-.805.078-.57-1.625c-.164-.398-.82-.727-1.625-.727-.977 0-1.953.406-1.953 1.461 0 2.516 5.61 1.953 5.61 5.688 0 2.117-1.868 3.25-4.149 3.25-1.703 0-3.414-.656-3.414-.656.164-.969.086-2.023 0-3.086h.821zm6.336 7.797c.242-.891.406-2.023.57-3.086l.891-.078.328 1.703c.078.406.32.734.97.734 1.054 0 2.437-.648 3.741-2.922-.578-1.383-2.28-5.844-3.828-9.258-.406-.898-.484-.977-1.047-1.141l-.414-.156v-.82l2.445.086 3-.164v.813l-.734.164c-.57.078-.805.398-.805.727 0 .086 0 .164.078.328.156.492 1.461 4.141 2.438 6.578.805-1.703 2.352-5.523 2.594-6.172.086-.328.164-.406.164-.648 0-.414-.242-.656-.805-.812l-.578-.165v-.812l2.281.078 2.11-.078v.812l-.407.32c-.812.328-.898.406-1.219 1.062l-3.57 8.359c-2.117 4.797-4.312 5.203-5.852 5.203-.976.001-1.71-.249-2.35-.655z"
                fill="#F45800" fill-rule="nonzero"></path>
        </svg>
    </div>
    <div class="bg-white rounded-lg shadow w-18 h-18 flex justify-center items-center">
        <svg viewBox="0 0 43 43" class="w-10" xmlns="http://www.w3.org/2000/svg">
            <g fill-rule="nonzero" fill="none">
                <path fill="#C63634" d="M.702 42.5h42V.5h-42z"></path>
                <path fill="#FFF" d="M2.49 40.713h38.425V2.287H2.489z"></path>
                <path fill="#C63634"
                    d="M6.957 20.16h13.405V6.755H6.957zM23.043 6.755V20.16L36.447 6.755H23.043M6.957 36.245h13.405V22.84H6.957zM23.043 22.84v13.405h13.404L23.043 22.84">
                </path>
            </g>
        </svg>
    </div>
    <div class="xl:col-start-2 bg-white rounded-lg shadow w-18 h-18 flex justify-center items-center">
        <svg viewBox="0 0 35 39" class="h-10" xmlns="http://www.w3.org/2000/svg">
            <g fill-rule="nonzero" fill="none">
                <path
                    d="M29.962 7.498a.352.352 0 0 0-.332-.309c-.139 0-2.882-.056-2.882-.056s-2.3-2.246-2.521-2.499c-.222-.224-.666-.168-.832-.112 0 0-.443.14-1.164.365a8.436 8.436 0 0 0-.554-1.376c-.803-1.572-2.023-2.414-3.464-2.414-.11 0-.193 0-.304.028-.056-.056-.083-.113-.139-.14-.637-.675-1.44-1.011-2.41-.983-1.857.056-3.714 1.432-5.238 3.846C9.07 5.561 8.266 7.695 8.016 9.351c-2.133.674-3.63 1.151-3.685 1.151-1.08.337-1.109.365-1.247 1.404-.056.786-2.882 22.939-2.882 22.939L23.922 39l10.28-2.583c-.028 0-4.212-28.722-4.24-28.919zM21.04 5.28c-.554.168-1.164.365-1.829.59 0-.955-.139-2.303-.554-3.426 1.413.225 2.106 1.853 2.383 2.836zm-3.076.955c-1.247.393-2.605.814-3.962 1.235.388-1.488 1.108-2.948 1.995-3.93.332-.366.803-.759 1.33-.983.554 1.095.665 2.639.637 3.678zm-2.55-4.97c.444 0 .804.084 1.11.309-.5.253-.998.646-1.442 1.151-1.191 1.292-2.106 3.285-2.466 5.222-1.136.365-2.244.702-3.242 1.011.665-3.06 3.187-7.609 6.04-7.693z"
                    fill="#95BF47"></path>
                <path
                    d="M29.63 7.19c-.139 0-2.882-.057-2.882-.057s-2.3-2.246-2.521-2.499a.442.442 0 0 0-.305-.14V39l10.28-2.583L29.99 7.498c-.055-.196-.222-.309-.36-.309z"
                    fill="#5E8E3E"></path>
                <path
                    d="m18.213 12.552-1.191 4.52s-1.33-.617-2.91-.505c-2.327.14-2.327 1.628-2.327 1.993.138 2.022 5.376 2.471 5.68 7.216.222 3.734-1.94 6.29-5.098 6.486-3.769.196-5.847-2.05-5.847-2.05l.804-3.453s2.105 1.6 3.768 1.488c1.08-.056 1.496-.983 1.441-1.6-.166-2.64-4.434-2.471-4.71-6.823-.222-3.65 2.133-7.328 7.342-7.665 2.023-.14 3.048.393 3.048.393z"
                    fill="#FFF"></path>
            </g>
        </svg>
    </div>
    <div class="bg-white rounded-lg shadow w-18 h-18 flex justify-center items-center">
        <svg viewBox="0 0 46 27" class="w-12" xmlns="http://www.w3.org/2000/svg">
            <g fill-rule="nonzero" fill="none">
                <path
                    d="M4.878 0h36.63c2.317 0 4.194 1.891 4.194 4.228v14.093c0 2.337-1.876 4.229-4.195 4.229H28.372L30.175 27l-7.93-4.45H4.898c-2.318 0-4.195-1.892-4.195-4.229V4.228C.684 1.91 2.56 0 4.878 0z"
                    fill="#7F54B3"></path>
                <path
                    d="M3.02 3.361c.26-.352.649-.538 1.167-.575.944-.074 1.481.371 1.611 1.337.574 3.88 1.204 7.166 1.87 9.858l4.055-7.742c.37-.705.833-1.077 1.389-1.114.815-.055 1.315.464 1.518 1.56.463 2.469 1.056 4.567 1.76 6.35.48-4.717 1.295-8.114 2.444-10.212.277-.52.685-.78 1.222-.817.425-.037.814.093 1.166.372.352.278.537.63.574 1.058.019.334-.037.612-.185.89-.722 1.338-1.315 3.584-1.796 6.703-.463 3.026-.63 5.384-.519 7.073.038.464-.037.873-.222 1.226-.222.408-.555.63-.981.668-.481.037-.981-.186-1.463-.687-1.722-1.764-3.092-4.4-4.092-7.909a348.54 348.54 0 0 0-2.666 5.347c-1.093 2.098-2.018 3.175-2.796 3.23-.5.038-.926-.39-1.296-1.28-.945-2.433-1.963-7.13-3.055-14.092-.074-.482.037-.91.296-1.244zm39.793 2.915c-.667-1.17-1.648-1.875-2.963-2.153a4.848 4.848 0 0 0-1-.112c-1.777 0-3.222.928-4.351 2.785-.963 1.578-1.444 3.323-1.444 5.235 0 1.43.296 2.655.888 3.676.667 1.17 1.648 1.876 2.963 2.154.352.074.685.111 1 .111 1.796 0 3.24-.928 4.351-2.784.963-1.597 1.444-3.342 1.444-5.254.019-1.448-.296-2.655-.888-3.658zM40.48 11.42c-.26 1.225-.723 2.135-1.408 2.748-.537.482-1.037.686-1.5.594-.444-.093-.814-.483-1.092-1.207a4.723 4.723 0 0 1-.333-1.69c0-.464.037-.928.13-1.355a6.011 6.011 0 0 1 .98-2.21c.612-.909 1.26-1.28 1.926-1.15.445.093.815.483 1.093 1.207.222.575.333 1.15.333 1.689 0 .483-.037.947-.13 1.374zM31.22 6.276c-.666-1.17-1.666-1.875-2.962-2.153a4.848 4.848 0 0 0-1-.112c-1.778 0-3.222.928-4.351 2.785-.963 1.578-1.444 3.323-1.444 5.235 0 1.43.296 2.655.888 3.676.667 1.17 1.648 1.876 2.963 2.154.352.074.685.111 1 .111 1.796 0 3.24-.928 4.35-2.784.964-1.597 1.445-3.342 1.445-5.254 0-1.448-.296-2.655-.889-3.658zM28.87 11.42c-.26 1.225-.722 2.135-1.407 2.748-.537.482-1.037.686-1.5.594-.445-.093-.815-.483-1.093-1.207a4.723 4.723 0 0 1-.333-1.69c0-.464.037-.928.13-1.355a6.011 6.011 0 0 1 .981-2.21c.611-.909 1.26-1.28 1.926-1.15.444.093.815.483 1.092 1.207.222.575.334 1.15.334 1.689.018.483-.037.947-.13 1.374z"
                    fill="#FFF"></path>
            </g>
        </svg>
    </div>
    <div class="bg-white rounded-lg shadow w-18 h-18 flex justify-center items-center"
        style="background-color: #ffcc00">
        <svg viewBox="0 0 31 25" class="w-10" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M10.282 20.383h4.028L10.242 24.5H6.214l4.068-4.117zm-5.434 0L.78 24.5h4.028l4.068-4.117H4.848zm10.397 0 4.068 4.117h4.029l-4.069-4.117h-4.028zm5.434 0 4.068 4.117h4.028l-4.068-4.117H20.68zm-6.207-.74C3.912 19.637-.17 10.457.38 3.5l3.101-.986c-.504 3.958.722 6.814 1.567 8.122C4.042 5.037 8.268.504 13.56.5c4.76-.003 8.696 3.473 8.678 8.46.697-1.904 1.183-4.802 1.284-6.83l7.146 1.779c-.571 8.389-6.863 15.736-16.196 15.733zm4.823-10.508a5.72 5.72 0 1 0-11.44 0 5.72 5.72 0 0 0 11.44 0z"
                fill="#000" fill-rule="nonzero"></path>
        </svg>
    </div>
    <div class="bg-white rounded-lg shadow w-18 h-18 flex justify-center items-center"
        style="background-color: #ffcc00">
        <svg viewBox="0 0 59 13" class="w-14" xmlns="http://www.w3.org/2000/svg">
            <g fill-rule="nonzero" fill="none">
                <path fill="#ffcc00" d="M58.489.113v12.774H.51V.113H58.49z"></path>
                <path
                    d="M19.205 5c-.254.33-.678.902-.936 1.236-.13.17-.367.478.417.478h4.129l1.223-1.594c.758-.987.065-3.042-2.647-3.042H10.708L8.855 4.491h10.096c.51 0 .503.186.254.51zm-3.033 2.31c-.785 0-.548-.31-.417-.48.258-.334.689-.9.942-1.228.25-.324.256-.51-.254-.51h-4.617l-3.72 4.847h9.072c2.996 0 4.664-1.954 5.179-2.63h-6.185zm5.901 2.63h5.322l2.018-2.631H24.09l-2.018 2.63zm13.732-7.862-2.042 2.659h-2.375l2.04-2.659h-5.32l-3.56 4.636h13.018l3.559-4.636h-5.32zM29.77 9.939h5.32l2.018-2.63h-5.32c-.002 0-2.018 2.63-2.018 2.63zM.51 8.347v.558h7.412l.429-.558H.512zm8.637-1.038H.511v.558H8.72l.43-.558zM.511 9.94H7.13l.427-.555H.51v.555zm50.167-1.034h7.81v-.559h-7.381l-.429.559zm-.793 1.034h8.604v-.555H50.31l-.426.555zm2.017-2.63-.428.559h7.015v-.559h-6.587zm-6.968-.595 3.559-4.636h-5.635c-.002 0-3.562 4.636-3.562 4.636h5.638zm-6.094.595s-.389.51-.578.755c-.668.866-.077 1.875 2.103 1.875h8.545l2.018-2.63H38.84z"
                    fill="#D50029"></path>
            </g>
        </svg>
    </div>
    <div class="bg-white rounded-lg shadow w-18 h-18 flex justify-center items-center">
        <svg viewBox="0 0 36 41" class="h-10" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <linearGradient x1="13.528%" y1="84.863%" x2="50.817%" y2="48.404%" id="linearGradient-u__hjkd12f-1">
                    <stop stop-color="#A90034" offset="0%"></stop>
                    <stop stop-color="#B03" offset="27.2%"></stop>
                    <stop stop-color="#D30032" offset="72.3%"></stop>
                    <stop stop-color="#DC0032" offset="100%"></stop>
                </linearGradient>
            </defs>
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <path
                    d="M24.444 18.298a.621.621 0 0 1-.587-.011l-.952-.566a.624.624 0 0 1-.203-.217l-.01-.016a.63.63 0 0 1-.098-.3l-.024-1.11a.62.62 0 0 1 .282-.512l11.445-6.667L18.237.146A1.365 1.365 0 0 0 17.593 0c-.233 0-.467.048-.644.146L.889 8.899 18.88 19.372a.612.612 0 0 1 .294.503v15.279a.622.622 0 0 1-.305.502l-.969.538a.626.626 0 0 1-.29.065h-.018a.627.627 0 0 1-.309-.065l-.971-.538a.62.62 0 0 1-.3-.502v-13.62a.382.382 0 0 0-.161-.268L0 12.04v18.073c0 .405.285.904.635 1.108l16.324 9.628c.174.102.404.153.634.152.23 0 .46-.049.634-.152l16.327-9.628c.348-.206.632-.703.632-1.108V12.04l-10.742 6.258Z"
                    id="Path" fill="url(#linearGradient-u__hjkd12f-1)" fill-rule="nonzero"></path>
            </g>
        </svg>
    </div>
    <div class="bg-white rounded-lg shadow w-18 h-18 flex justify-center items-center">
        <svg viewBox="0 0 832 283" xmlns="http://www.w3.org/2000/svg" class="w-12">
            <g transform="translate(.71 .23)" fill-rule="nonzero" fill="none">
                <circle fill="#FFD100" cx="784.27" cy="234.5" r="46.4"></circle>
                <path
                    d="M133.46 131.42v60.71h50.51c-7.38 11.58-24 17.75-35.3 17.75-38 0-57-21.67-57-65.4 0-48.28 25.1-73 74.91-73 19.77 0 45.62 4.94 73.38 13.69V12.55c-8-3.42-20.15-6.09-35.74-8.75A258.46 258.46 0 0 0 162.01 0C112.59 0 73.42 13.31 44.15 39.92 14.88 66.53 0 102.28 0 147.53c0 41.44 11.407 74.137 34.22 98.09 22.813 24.327 53.61 36.493 92.39 36.5 39 0 74.73-20.21 86.26-45.86l-.25 41.3h56.33V131.42H133.46zM296.74 277.56v-273h87.47v201.9h95.43v71.1zM507.39 270.72V196.2c12.93 4.19 28.13 7.61 45.24 10.65 17.11 3.04 31.94 4.56 44.49 4.56 21.29 0 32.32-5.32 32.32-14.83 0-6.08-3.42-9.12-19-12.54l-30.43-6.84c-52.09-11.78-76.42-38-76.42-82.51 0-29.27 10.26-52.47 30.41-69.58C554.21 8.36 582.29 0 617.65 0c24.34 0 61.6 4.94 84.41 10.65v71.1c-11.79-3-25.85-6.09-43-8.75s-30.42-3.8-40.31-3.8c-18.63 0-29.27 5.32-29.27 14.83 0 5.7 4.94 9.5 15.2 12.17l35.36 8.36c51.71 12.17 75.67 38.78 75.67 84 0 28.9-10.65 51.71-31.56 68.44-20.91 16.73-49.81 25.09-86.69 25.09-34.94.03-70.25-4.89-90.07-11.37z"
                    fill="#061AB1"></path>
            </g>
        </svg>
    </div>
    <div class="bg-white rounded-lg shadow w-18 h-18 flex justify-center items-center">
        <svg viewBox="0 0 39 25" class="w-10" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <linearGradient x1="10.693%" y1="50.372%" x2="100.195%" y2="48.304%" id="linearGradient-jkg64qwy-o-1">
                    <stop stop-color="#EEF7FE" offset="0%"></stop>
                    <stop stop-color="#1E97D0" offset="100%"></stop>
                </linearGradient>
                <linearGradient x1="13.689%" y1="16.585%" x2="86.311%" y2="100.949%" id="linearGradient-jkg64qwy-o-2">
                    <stop stop-color="#D6E9F7" offset="0%"></stop>
                    <stop stop-color="#48A2D7" offset="100%"></stop>
                </linearGradient>
                <linearGradient x1="16.234%" y1="51.45%" x2="100.285%" y2="46.169%" id="linearGradient-jkg64qwy-o-3">
                    <stop stop-color="#D4EAF7" offset="0%"></stop>
                    <stop stop-color="#1493C5" offset="100%"></stop>
                </linearGradient>
                <linearGradient x1="13.546%" y1="0%" x2="86.454%" y2="100.97%" id="linearGradient-jkg64qwy-o-4">
                    <stop stop-color="#D9EBF7" offset="0%"></stop>
                    <stop stop-color="#318ABB" offset="100%"></stop>
                </linearGradient>
                <linearGradient x1="29.288%" y1="52.723%" x2="100%" y2="32.494%" id="linearGradient-jkg64qwy-o-5">
                    <stop stop-color="#9DC4DF" offset="0%"></stop>
                    <stop stop-color="#137EAB" offset="100%"></stop>
                </linearGradient>
                <linearGradient x1="13.055%" y1="-.965%" x2="86.945%" y2="100.965%" id="linearGradient-jkg64qwy-o-6">
                    <stop stop-color="#DEEEF8" offset="0%"></stop>
                    <stop stop-color="#3586B3" offset="100%"></stop>
                </linearGradient>
                <linearGradient x1="50%" y1="100.967%" x2="50%" y2="-.967%" id="linearGradient-jkg64qwy-o-7">
                    <stop stop-color="#646368" offset="0%"></stop>
                    <stop stop-color="#646368" offset="100%"></stop>
                </linearGradient>
                <linearGradient x1="50.485%" y1="100.984%" x2="50.485%" y2="-.003%" id="linearGradient-jkg64qwy-o-8">
                    <stop stop-color="#636267" offset="0%"></stop>
                    <stop stop-color="#646368" offset="100%"></stop>
                </linearGradient>
                <linearGradient x1="56.522%" y1="100.006%" x2="56.522%" y2="0%" id="linearGradient-jkg64qwy-o-9">
                    <stop stop-color="#6B6A6F" offset="0%"></stop>
                    <stop stop-color="#EAEBED" offset="100%"></stop>
                </linearGradient>
            </defs>
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="Group-18" transform="translate(-1139.5 -584)">
                    <g id="Group-2" transform="translate(1129 566.5)">
                        <g id="Hermes_Logistik_Gruppe_2008" transform="translate(10.56 18)">
                            <path id="path2588" fill="url(#linearGradient-jkg64qwy-o-1)"
                                d="M32.601 7.058 34.405 0H0l5.948 7.058z"></path>
                            <path id="path2594" fill="url(#linearGradient-jkg64qwy-o-2)"
                                d="m0 1.821 5.48 5.237h.468L0 0z"></path>
                            <path id="path3415" fill="url(#linearGradient-jkg64qwy-o-3)"
                                d="M14.497 15.329 8.671 8.428h23.514l-1.734 6.901z"></path>
                            <path id="path3417" fill="url(#linearGradient-jkg64qwy-o-4)"
                                d="m14.081 15.329-5.41-5.167V8.428l5.826 6.901z"></path>
                            <path id="path3435" fill="url(#linearGradient-jkg64qwy-o-5)"
                                d="m24.173 24-5.896-6.936H30L28.197 24z"></path>
                            <path id="path3437" fill="url(#linearGradient-jkg64qwy-o-6)"
                                d="M18.277 18.798 23.827 24h.346l-5.896-6.936z"></path>
                            <path id="path3457" fill="url(#linearGradient-jkg64qwy-o-7)"
                                d="M29.388 24h3.335l1.766-6.92h-3.335z"></path>
                            <path id="path3473" fill="url(#linearGradient-jkg64qwy-o-8)"
                                d="M31.644 15.265h3.286l1.766-6.805h-3.335z"></path>
                            <path id="path3487" fill="url(#linearGradient-jkg64qwy-o-9)"
                                d="M33.802 7.025h3.36L38.879.036h-3.36z"></path>
                        </g>
                    </g>
                </g>
            </g>
        </svg>
    </div>
    <div class="bg-white rounded-lg shadow w-18 h-18 flex justify-center items-center">
        <svg viewBox="0 0 31 31" class="w-10" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fill-rule="evenodd">
                <path
                    d="M30.711 4.288c0 .943-.452 3.427-4.175 3.427-3.724 0-4.176-2.484-4.176-3.427 0-.944.452-3.428 4.176-3.428 3.723 0 4.175 2.484 4.175 3.428zm-6.948 0c0 .804.552 1.937 2.773 1.937 2.22 0 2.772-1.132 2.772-1.937 0-.805-.552-1.938-2.772-1.938-2.221 0-2.773 1.133-2.773 1.938zm6.738 8.97v1.39H22.57v-1.49l5.656-2.91v-.02H22.57V8.837h7.932v1.57l-5.524 2.83v.02h5.523zm-1.403 8.066V17.54H27.43v3.478h-1.403v-3.478h-2.055v3.954H22.57V16.08h7.932v5.245h-1.403z"
                    fill="#010202" fill-rule="nonzero"></path>
                <path
                    d="M6.052 30.86H.322V.993h12.53c5.31 0 8.518 3.702 8.518 9.567 0 2.704-1.376 9.526-8.748 9.526h-6.57V30.86zm5.31-15.932c4.278 0 4.278-3.328 4.278-4.659 0-2.912-1.49-4.118-5.042-4.118H6.052v8.777h5.31z"
                    fill="#354B6A" fill-rule="nonzero"></path>
                <path fill="#1A1A1A" d="M22.56 22.927h7.933v7.933H22.56z"></path>
                <path
                    d="M30.711 4.288c0 .943-.452 3.427-4.175 3.427-3.724 0-4.176-2.484-4.176-3.427 0-.944.452-3.428 4.176-3.428 3.723 0 4.175 2.484 4.175 3.428zm-6.948 0c0 .804.552 1.937 2.773 1.937 2.22 0 2.772-1.132 2.772-1.937 0-.805-.552-1.938-2.772-1.938-2.221 0-2.773 1.133-2.773 1.938zm6.738 8.97v1.39H22.57v-1.49l5.656-2.91v-.02H22.57V8.837h7.932v1.57l-5.524 2.83v.02h5.523zm-1.403 8.066V17.54H27.43v3.478h-1.403v-3.478h-2.055v3.954H22.57V16.08h7.932v5.245h-1.403z"
                    fill="#760F00" fill-rule="nonzero"></path>
                <path fill="#354B6A" d="M22.56 22.927h7.933v7.933H22.56z"></path>
            </g>
        </svg>
    </div>
</div>

Related Examples

Company icons grid

Amit Pachange

3 years ago

13.7k
Company icons grid

Piet Vriend

3 years ago

10.9k
Brand icons grid
showcase your 'Happy Customers'.

Kennedy Mills

3 years ago

11.9k
Responsive products grid
Responsive product card grid using tailwind CSS.

Arya

3 years ago

46.2k
Sponsors section
icon grid

Sienna

3 years ago

13.9k
Sponsors section with icon

Sienna

3 years ago

13.7k
Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Alok

3 years ago

62.4k
Company Logos Showcase
Client showcase with icons

Brandon D

4 years ago

13.4k
Login Form
Login Form With google icon

Md. Tofayel islam

1 year ago

2.1k
Social Media Icons
Social Media Icons

Aman kumar

2 years ago

3.4k
Social Media Icons
Social Media Icons

Aman kumar

2 years ago

3.5k
SocialConnect - Stay Connected
SocialConnect - Stay Connected

Uwera Dorcas

1 year ago

1.3k

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.