Image Selection

scrimba

Watch in fullscreen

Image Selection

by Andre Madarang

Learn Alpine JS

About

Comments

Notes

Image Selection

Expand for more info

images.html

run

preview

console

<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.2.0/dist/tailwind.min.css">
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.8/dist/alpine.js" defer></script>
    </head>
    <body class="bg-gray-400">
        <div class="container mx-auto px-4 mt-4">
            <div>
                <img src="/mac-pro.jpg" alt="mac pro">
            </div>
            <div class="flex items-center mt-4">
                <a href="#" class="border border-transparent hover:border-blue-500"><img src="/mac-pro.jpg" alt="mac pro" class="w-12"></a>
                <a href="#" class="border border-transparent hover:border-blue-500 ml-2"><img src="/pro-display-xdr.jpg" alt="mac pro" class="w-12"></a>
                <a href="#" class="border border-transparent hover:border-blue-500 ml-2"><img src="/macbook-pro.jpg" alt="mac pro" class="w-12"></a>
            </div>
        </div>
    </body>
</html>

<html>

<head>

defer></script>

</head>

<div>

</div>

<a href="#" class="border border-transparent hover:border-blue-500"><img

src="/mac-pro.jpg" alt="mac pro" class="w-12"></a>

<a href="#" class="border border-transparent hover:border-blue-500 ml-2"><img

src="/pro-display-xdr.jpg" alt="mac pro" class="w-12"></a>

<a href="#" class="border border-transparent hover:border-blue-500 ml-2"><img

src="/macbook-pro.jpg" alt="mac pro" class="w-12"></a>

</div>

-4:01