https---github.com-JustBenjamin-employee-card/index.html at master · JustBenjamin/https---github.com-JustBenjamin-employee-card · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
    <head>
        <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
        <title>Employee Card</title>
        <meta name="description" content="A UI Agency employee card">
        <meta name="author" content="Benjamin Hove">

    </head>
    <body class="bg-gray-700 flex justify-center items-center h-screen">
        <!--Layer 1-->
        <div class="flex flex-col bg-white w-2/3 shadow-lg rounded-lg overflow-hidden md:w-2/6">
            <div class="bg-gray-200 text-gray-700 text-lg px-6 py-4">Frontend Developer</div>

             <!--Layer 2-->
            <div class="flex justify-between items-center px-6 py-4">
                <div class="bg-orange-600 text-xs uppercase px-3 py-1 rounded-full border border-gray-200 text-gray-200 font-bold">
                    Full Time
                </div>
                <div class="text-sm">October 1, 2022</div>
            </div>

             <!--Layer 3-->
             <div class="px-6 py-4 border-t border-gray-200">
                <div class="border rounded-lg p-4 bg-gray-200">
                    Passionate about designing and developing user interfaces.
                    <ul>
                        <li>Design - Photoshop, Figma</li>
                        <li>Development - HTML/CSS/JavaScript</li>
                        <li>Frameworks - Tailwind, Next.js</li>
                        <li>CMS - WordPress, Drupal</li>
                    </ul>
                </div>
             </div>

             <!--Layer 4-->
             <div class="bg-gray-200 px-6 py-4">
                <div class="uppercase text-xs text-gray-600 font-bold">Employee</div>

                <div class="flex items-center pt-3">
                    <div class="bg-blue-700 p-2 rounded-full text-white">BH</div>

                    <div class="ml-4">
                        <p class="font-bold">Benjamin Hove</p>
                        <p class="text-sm text-gray-700 mt-1">UI Development</p>

                    </div>

                </div>


             </div>


        </div>


    </body>
</html>