diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 42b1a97..eca63d2 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -56,6 +56,7 @@ enum Pattern {
     PresenceIndicator = 'Presence indicator',
     PreviousNextButtons = 'Previous next buttons',
     PricingTable = 'Pricing table',
+    PriceTag = 'Price tag',
     PropertyList = 'Property list',
     ProgressBar = 'Progress bar',
     QuestionsAndAnswers = 'Questions and answers',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 3326d05..73153ad 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -128,6 +128,7 @@ const ExplorePage = () => {
                                 <CoverCard pattern={Pattern.LinedPaper} />
                                 <CoverCard pattern={Pattern.MediaObject} />
                                 <CoverCard pattern={Pattern.OverlayPlayButton} />
+                                <CoverCard pattern={Pattern.PriceTag} />
                                 <CoverCard pattern={Pattern.PricingTable} />
                                 <CoverCard pattern={Pattern.PropertyList} />
                                 <CoverCard pattern={Pattern.QuestionsAndAnswers} />
diff --git a/client/patterns/price-tag/Cover.tsx b/client/patterns/price-tag/Cover.tsx
new file mode 100644
index 0000000..e7834cf
--- /dev/null
+++ b/client/patterns/price-tag/Cover.tsx
@@ -0,0 +1,66 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '1.5rem',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        background: 'rgba(0, 0, 0, .3)',
+                        color: '#FFF',
+                        display: 'flex',
+                        height: '2rem',
+                        justifyContent: 'center',
+                        position: 'relative',
+                        width: '100%',
+                    }
+                }>
+                    <div
+                        style={{
+                            borderColor: 'transparent rgba(0, 0, 0, 0.3) transparent transparent',
+                            borderStyle: 'solid',
+                            borderWidth: '1rem 1rem 1rem 0rem',
+                            height: 0,
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'translate(-100%, 0)',
+                            width: 0,
+                        }}
+                    />
+                    <div
+                        style={{
+                            background: '#FFF',
+                            borderRadius: '9999rem',
+                            height: '0.5rem',
+                            left: 0,
+                            position: 'absolute',
+                            top: '50%',
+                            transform: 'translate(-0.5rem, -50%)',
+                            width: '0.5rem',
+                        }}
+                    />
+                    99.9$
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/price-tag/Details.tsx b/client/patterns/price-tag/Details.tsx
new file mode 100644
index 0000000..56cb403
--- /dev/null
+++ b/client/patterns/price-tag/Details.tsx
@@ -0,0 +1,111 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import './price-tag.css';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout pattern={Pattern.PriceTag}>
+            <Helmet>
+                <meta name="description" content="Create a price tag with CSS" />
+                <meta name="keywords" content="css price tag" />
+            </Helmet>
+            <div className='p-8 pb-20'>
+                <BrowserFrame
+html={`
+<div class="price-tag">
+    ...
+</div>
+`}
+css={`
+:root {
+    --price-tag-background: rgba(0, 0, 0, 0.3);
+    --price-tag-height: 2rem;
+}
+
+.price-tag {
+    background: var(--price-tag-background);
+    color: #FFF;
+
+    /* Center the price */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Used to position the triangle */
+    position: relative;
+
+    /* Size */
+    height: var(--price-tag-height);
+
+    /* Spacing */
+    padding: 0.25rem 0.5rem;
+}
+
+/* The triangle */
+.price-tag::before {
+    content: '';
+
+    border-color: transparent var(--price-tag-background) transparent transparent;
+    border-style: solid;
+    border-width: calc(var(--price-tag-height) / 2)
+                  calc(var(--price-tag-height) / 2)
+                  calc(var(--price-tag-height) / 2)
+                  0rem;
+    
+    /* Position */
+    left: 0px;
+    position: absolute;
+    top: 0px;
+    transform: translate(-100%, 0px);
+}
+
+/* The dot */
+.price-tag::after {
+    content: '';
+
+    /* Make it like a cirle */ 
+    background: #FFF;
+    border-radius: 9999rem;
+    
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 50%;
+    transform: translate(-0.5rem, -50%);
+
+    /* Size */
+    height: 0.5rem;
+    width: 0.5rem;
+}
+`}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            height: '100%',
+                            justifyContent: 'center',
+                            padding: '8px',
+                        }}
+                    >
+                        <div className="price-tag">99.99$</div>
+                    </div>
+                </BrowserFrame>
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.TriangleButtons]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/price-tag/price-tag.css b/client/patterns/price-tag/price-tag.css
new file mode 100644
index 0000000..f7be3ec
--- /dev/null
+++ b/client/patterns/price-tag/price-tag.css
@@ -0,0 +1,65 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --price-tag-background: rgba(0, 0, 0, 0.3);
+    --price-tag-height: 2rem;
+}
+
+.price-tag {
+    background: var(--price-tag-background);
+    color: #FFF;
+
+    /* Center the price */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Used to position the triangle */
+    position: relative;
+
+    /* Size */
+    height: var(--price-tag-height);
+
+    /* Spacing */
+    padding: 0.25rem 0.5rem;
+}
+
+/* The triangle */
+.price-tag::before {
+    content: '';
+
+    border-color: transparent var(--price-tag-background) transparent transparent;
+    border-style: solid;
+    border-width: calc(var(--price-tag-height) / 2)
+                  calc(var(--price-tag-height) / 2)
+                  calc(var(--price-tag-height) / 2)
+                  0rem;
+    
+    /* Position */
+    left: 0px;
+    position: absolute;
+    top: 0px;
+    transform: translate(-100%, 0px);
+}
+
+/* The dot */
+.price-tag::after {
+    content: '';
+
+    /* Make it like a cirle */ 
+    background: #FFF;
+    border-radius: 9999rem;
+    
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 50%;
+    transform: translate(-0.5rem, -50%);
+
+    /* Size */
+    height: 0.5rem;
+    width: 0.5rem;
+}
diff --git a/client/patterns/triangle-buttons/Details.tsx b/client/patterns/triangle-buttons/Details.tsx
index b249662..228332a 100644
--- a/client/patterns/triangle-buttons/Details.tsx
+++ b/client/patterns/triangle-buttons/Details.tsx
@@ -238,7 +238,7 @@ css={`
                 </BrowserFrame>
             </div>
 
-            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Voting]} />
+            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.PriceTag, Pattern.Voting]} />
         </DetailsLayout>
     );
 };
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 9e0dcfc..76a5246 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -51,6 +51,7 @@
     <url><loc>https://csslayout.io/patterns/popover-arrow</loc></url>
     <url><loc>https://csslayout.io/patterns/presence-indicator</loc></url>
     <url><loc>https://csslayout.io/patterns/previous-next-buttons</loc></url>
+    <url><loc>https://csslayout.io/patterns/price-tag</loc></url>
     <url><loc>https://csslayout.io/patterns/pricing-table</loc></url>
     <url><loc>https://csslayout.io/patterns/progress-bar</loc></url>
     <url><loc>https://csslayout.io/patterns/property-list</loc></url>