ak 47

AK 47 Html and Css buld

This tailwind example is contributed by Arjun Kumar, on 25-May-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Graph

Chart

Author Arjun Kumar

Tailwind v3.4 202 1

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AK-47 Rifle</title>

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    width:100vw;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(to bottom,#2a2a2a,#111);
    overflow:hidden;
}

.ak47{
    position:relative;
    width:1100px;
    height:400px;
    transform:scale(1.05);
}

.shadow{
    position:absolute;
    width:760px;
    height:35px;
    background:rgba(0,0,0,0.4);
    border-radius:50%;
    bottom:20px;
    left:160px;
    filter:blur(12px);
}

.stock{
    position:absolute;
    width:190px;
    height:32px;
    background:linear-gradient(to bottom,#9b5d2f,#6e3f1f);
    border:5px solid #111;
    border-radius:12px;
    left:20px;
    top:120px;
    transform:rotate(-10deg);
}

.stock-back{
    position:absolute;
    width:45px;
    height:105px;
    background:linear-gradient(to bottom,#9b5d2f,#6e3f1f);
    border:5px solid #111;
    border-radius:12px;
    left:0;
    top:72px;
    transform:rotate(-18deg);
}

.receiver{
    position:absolute;
    width:290px;
    height:70px;
    background:linear-gradient(to bottom,#707070,#4a4a4a);
    border:5px solid #111;
    border-radius:10px;
    left:170px;
    top:100px;
}

.receiver-top{
    position:absolute;
    width:240px;
    height:18px;
    background:#8c8c8c;
    border-radius:20px;
    left:20px;
    top:10px;
}

.receiver-detail{
    position:absolute;
    width:18px;
    height:18px;
    background:#2b2b2b;
    border-radius:50%;
    left:25px;
    top:38px;
}

.barrel{
    position:absolute;
    width:420px;
    height:26px;
    background:linear-gradient(to bottom,#5f5f5f,#383838);
    border:5px solid #111;
    border-radius:6px;
    left:430px;
    top:122px;
}

.barrel-tip{
    position:absolute;
    width:36px;
    height:44px;
    background:#5b5b5b;
    border:5px solid #111;
    border-radius:5px;
    right:-24px;
    top:-14px;
}

.front-sight{
    position:absolute;
    width:16px;
    height:60px;
    background:#1b1b1b;
    right:55px;
    top:-20px;
}

.front-sight::after{
    content:"";
    position:absolute;
    width:30px;
    height:10px;
    background:#1b1b1b;
    top:0;
    left:-7px;
}

.handguard{
    position:absolute;
    width:150px;
    height:38px;
    background:linear-gradient(to bottom,#a36333,#6d3d1e);
    border:5px solid #111;
    border-radius:12px;
    left:560px;
    top:116px;
}

.handguard::after{
    content:"";
    position:absolute;
    width:110px;
    height:6px;
    background:rgba(255,255,255,0.15);
    border-radius:10px;
    top:6px;
    left:15px;
}

.handle{
    position:absolute;
    width:55px;
    height:135px;
    background:linear-gradient(to bottom,#9b5d2f,#6d3d1e);
    border:5px solid #111;
    border-radius:0 0 18px 18px;
    left:295px;
    top:170px;
    transform:rotate(18deg);
}

.magazine{
    position:absolute;
    width:68px;
    height:165px;
    background:linear-gradient(to bottom,#444,#222);
    border:5px solid #111;
    border-radius:0 0 50px 50px;
    left:400px;
    top:145px;
    transform:rotate(18deg);
}

.magazine::after{
    content:"";
    position:absolute;
    width:12px;
    height:120px;
    background:rgba(255,255,255,0.08);
    border-radius:20px;
    left:10px;
    top:10px;
}

.trigger-guard{
    position:absolute;
    width:65px;
    height:65px;
    border:7px solid #111;
    border-top-color:transparent;
    border-left-color:transparent;
    border-radius:50%;
    left:335px;
    top:170px;
    transform:rotate(20deg);
}

.trigger{
    position:absolute;
    width:9px;
    height:34px;
    background:#111;
    border-radius:10px;
    left:362px;
    top:190px;
    transform:rotate(18deg);
}

.rear-sight{
    position:absolute;
    width:45px;
    height:12px;
    background:#1d1d1d;
    border-radius:4px;
    left:360px;
    top:90px;
}

</style>
</head>

<body>

</div>

</body>
</html>

Related Examples

Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Ijila Itunu

6 months ago

948
Bar chart with chart.js and tailwind css

Kairi Greene

3 years ago

11.4k
Line chart with chart.js and tailwind css

Kairi Greene

3 years ago

12.9k
Bar Chart with TailwindCSS and AlpineJS

Akshay

4 years ago

14k
Infographic Component
Design a modern infographic component with Tailwind CSS. This component helps you display data in a clean, responsive, and visually appealing way. With utility classes, gradients, and smooth transitions, you can quickly build infographics that look professional and work perfectly on all devices.

CodewithFaraz

1 year ago

1.4k
Best chat prompt

ORGIN_DREAMS

1 year ago

949
Pie chart with chart.js and tailwind css

Kairi Greene

3 years ago

13.9k
Daily growth chart
chart for showing data each day of the week

Samuel Dawson

3 years ago

12k
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Abhiraj

1 year ago

4.3k
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

SHARIFUL ISLAM

1 year ago

2.5k
Donunt chart with chart.js and tailwind css

Kairi Greene

3 years ago

12.8k
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Ayyamperumal S

7 months ago

987