Skip to content

Instantly share code, notes, and snippets.

Created December 22, 2020 17:07
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Discuss on Twitter Vue Component
<div class="speech-bubble mt-16">
class="block no-underline text-blue-500"
<font-awesome-icon :icon="['fab', 'twitter']" />
Discuss on Twitter
export default {
props: {
url: { type: String, required: true },
<style scoped>
.speech-bubble {
position: relative;
background-color: #fff;
padding: 1.125em 1.5em;
font-size: 1.25em;
border-radius: 1rem;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3),
0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
.speech-bubble::before {
content: '';
position: absolute;
width: 0;
height: 0;
bottom: 100%;
left: 1.5em;
border: 0.75rem solid transparent;
border-top: none;
border-bottom-color: #fff;
filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment