Twitter in Eclair HP

_header.scss

.header-banner {
	display: block;
	margin-bottom: 16px;
	box-shadow: 0 2px 4px rgba($black, .2);

	> img {
		width: 240px;
		height: 80px;
		box-shadow: 0 2px 4px rgba(0,0,0,.2);
		border-radius: 2px;
		transition: .1s;
	}
	&:last-child {
		margin-bottom: 0;
	}
	&:hover > img {
		opacity: .8;
		transform: translateY(-1px);
		box-shadow: 0 3px 6px rgba($black, .2);
	}
}

.header-twitter-header {
	background-color: #2796DD;
	color: white;
	border-radius: 4px 4px 0 0;
	margin-bottom: -4px;
	padding-bottom: 4px;
	display: flex;
	align-items: center;
	font-size: 0.8em;

	> img {
		margin-left: 4px;
	}

	.twitter-name {
		flex: 1;
		color: white;
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}

	.twitter-follow {
		color: white;
		display: inline-block;
		margin-right: 5px;
		padding: 6px 12px;
		text-decoration: none;
		border: 1px solid $white;
		border-radius: 16px;
		transition: 0.1s;
		&:hover {
			background-color: $white;
			color: $eclair-orange;
		}
	}
}

index.html

<div v-if="!isMobile" class="header-banner">
	<div class="header-twitter-header">
		<img src="images/header/twitterIcon.svg" width=36 alt="">
		<a class="twitter-name" href="https://twitter.com/Eclair_HTL" target="_blank">@Eclair_HTL</a>
		<a class="twitter-follow" href="https://twitter.com/intent/follow?original_referer=http%3A%2F%2Flocalhost%3A3000%2F&ref_src=twsrc%5Etfw&region=follow_link&screen_name=Eclair_HTL&tw_p=followbutton">フォロー</a>
	</div>
	<a class="twitter-timeline" data-lang="ja" data-width="240" data-height="200" data-chrome="noheader nofooter" href="https://twitter.com/Eclair_HTL?ref_src=twsrc%5Etfw">Tweets by Eclair_HTL</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>